成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

移動(dòng)端

chaosx110 / 3357人閱讀

摘要：純，隱藏滾動(dòng)條，保留鼠標(biāo)滾動(dòng)效果。中彈性拉伸的現(xiàn)象解決禁用那個(gè)層或者的事件的默認(rèn)行為禁用音視頻自動(dòng)播放這個(gè)是蘋(píng)果官方明確提出的，為了用戶(hù)的利益。所以的瀏覽器依然是死角，不能做到自動(dòng)播放。

只是一個(gè)文檔總結(jié)，純粹是喜歡SF的Markdown。
HTML
CSS

X軸上采用百分比

字體大小以及部分不能用百分比衡量者，采用REM單位

JS 
配置頁(yè)面根font-size大小   
(function ( doc, win ) {
    var win = window;
    var doc = win.document;
    var baseWidth = 640;
    var documentHTML = doc.documentElement;
    function setRootFont(){
    var docWidth = documentHTML.getBoundingClientRect().width;
    var scale = docWidth / baseWidth;
    if (docWidth > 640) {
    scale = 1;
    }
    var p = scale*100;
    documentHTML.style.fontSize = p + "px";
    }
    setRootFont();
    win.addEventListener("resize", setRootFont, false);
})( document, window );
表單

表單之 - 各個(gè)瀏覽器自帶的樣式

這個(gè)問(wèn)題不僅是手機(jī)端還有PC端，張?chǎng)涡翊笊裼性斀?

表單之 - 輸入框的光標(biāo)大小

解決： 注意排查line-height值，不要使用line-height垂直居中，用上下同padding值

表單之 - 去掉input和select的默認(rèn)樣式

/* input和select的默認(rèn)樣式取消 */
input,select{
    outline: transparent dotted;border: 0;background: #fff;
    -webkit-appearance : none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
}

/* input的placeholder修改，至于select下的option的字體顏色可以直接控制select的color屬性 */
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
    color: #ccc;font-size: 13px;
}
input:-moz-placeholder,textarea:-moz-placeholder {
    color: #ccc;font-size: 13px;
}
input::-moz-placeholder,textarea::-moz-placeholder {
    color: #ccc;font-size: 13px;
}
input:-ms-input-placeholder,textarea:-ms-input-placeholder {
    color: #ccc;font-size: 13px;
}

表單之 - 重寫(xiě)按鈕的樣式

CODEPEN

表單之 - iOS機(jī)型點(diǎn)擊輸入框頁(yè)面會(huì)放大

  
   

width - viewport的寬度 height - viewport的高度
initial-scale - 初始的縮放比例
minimum-scale - 允許用戶(hù)縮放到的最小比例
maximum-scale - 允許用戶(hù)縮放到的最大比例
user-scalable - 用戶(hù)是否可以手動(dòng)縮放

滾動(dòng)條

修改樣式

&::-webkit-scrollbar {
  width: 4px
}
&::-webkit-scrollbar-track {
  border-radius: 4px
}
&::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .1);
  border-radius: 6px
}

隱藏滾動(dòng)條但是依然可以滾動(dòng)

&::-webkit-scrollbar {
  display:none
}

但是上述僅用于 webkit 瀏覽器，其他瀏覽器見(jiàn)過(guò)一種思路是：在原有的 div外部套一層div，樣式內(nèi)寫(xiě)overflow：hidden; 使這個(gè)外部的div寬度小于內(nèi)部出滾動(dòng)條的div.內(nèi)部div的樣式為overflow-y:auto;overflow-x:hidden;。這樣，內(nèi)部div的滾動(dòng)條就被隱藏起來(lái)了，但是，此時(shí)依然可以滾動(dòng)。純css，div隱藏滾動(dòng)條，保留鼠標(biāo)滾動(dòng)效果。

iOS

iOS中彈性拉伸的現(xiàn)象

解決：禁用那個(gè)層或者body的touchstart事件的默認(rèn)行為

// disabled touchstart event
document.addEventListener("touchstart",function(event){
    event.preventDefault();
}, false);

iOS禁用音視頻自動(dòng)播放

這個(gè)是蘋(píng)果官方明確提出的，為了用戶(hù)的利益。此處的iOS涵蓋了（iPhone和iPad）

解決：這個(gè)其實(shí)不能根本上解決問(wèn)題，只能借用微信環(huán)境下，微信的 js-sdk 來(lái)實(shí)現(xiàn)自動(dòng)播放。所以iOS的Safari瀏覽器依然是死角，不能做到自動(dòng)播放。

  wx.ready(() => {
    document.getElementById("audio").play();
  })

追加：遇見(jiàn) touchstart 和 touchend 事件，在 touchstart 時(shí)觸發(fā)音頻 a，在 touchend 時(shí)觸發(fā)音頻 b，但是如果長(zhǎng)按時(shí)間過(guò)長(zhǎng)，會(huì)出現(xiàn) b 不播放或者播放延遲的現(xiàn)象。原因是，音頻資源沒(méi)加載完成。

  // 預(yù)設(shè) this 環(huán)境
  function preload() {
    wx.ready(() => {
      wx.getNetworkType({
        success: () => {
          this.a = new Audio("a.mp3");
          this.b = new Audio("b.mp3");
          this.a.loop = true;
          this.a.load();
          this.b.load();
        }
      });
    });
  }
  
  // touchstart and touchend
  function start() {
    this.a.play();
  }
  function end() {
    this.a.pause();
    this.b.play();
  }

iOS中DOM的onclick事件無(wú)效

解決：在該DOM上css上添加{cursor: pointer}

個(gè)例

Chrome瀏覽器默認(rèn)最小字體是12px

解決：使用適配手機(jī)的縮放。（ transform: scale(...) translate(...) ）

CODEPEN DEMO

Safari無(wú)痕模式下不支持sessionStorage.setItem()

解決一：業(yè)務(wù)場(chǎng)景可使用全局變量處理

解決二：Safari Private browsing mode appears to support localStorage, but doesn"t

學(xué)習(xí)資料

使用Flexible實(shí)現(xiàn)手淘H5頁(yè)面的終端適配

前端頁(yè)面布局常見(jiàn)問(wèn)題/已踩過(guò)的坑大雜燴

——好記性不如爛筆頭

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112302.html

相關(guān)文章

  • 移動(dòng)端布局與適配

    摘要：實(shí)戰(zhàn)之微信錢(qián)包騰訊服務(wù)界面網(wǎng)格布局是讓開(kāi)發(fā)人員設(shè)計(jì)一個(gè)網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對(duì)于移動(dòng)端適配，不同的公司不同的團(tuán)隊(duì)有不同的解決方案。柵格系統(tǒng)用于處理頁(yè)面多終端適配的問(wèn)題。 grid實(shí)戰(zhàn)之微信錢(qián)包 騰訊服務(wù)界面 CSS3網(wǎng)格布局是讓開(kāi)發(fā)人員設(shè)計(jì)一個(gè)網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。而不是使用浮動(dòng)制作一個(gè)網(wǎng)格，實(shí)際上是你將一個(gè)元素聲明為一個(gè)網(wǎng)格容器，并把元素內(nèi)容置于網(wǎng)格中。 移動(dòng)端頁(yè)面適配—...

    Clect 評(píng)論0 收藏0

  • Mac聯(lián)機(jī)調(diào)試移動(dòng)端頁(yè)面方法 和 移動(dòng)端IOS遇到的兼容性問(wèn)題

    摘要：移動(dòng)端失效需求點(diǎn)擊一個(gè)，讓某一個(gè)聚焦并彈出虛擬鍵盤(pán)。安卓可以聚焦，但是不會(huì)彈出虛擬鍵盤(pán)說(shuō)明安卓機(jī)的表現(xiàn)也是異常的無(wú)法聚焦，也不會(huì)彈出虛擬鍵盤(pán)所以我的這邊的實(shí)踐結(jié)論是，如果希望在頁(yè)面初始化過(guò)程中，讓自動(dòng)聚焦并彈出虛擬鍵盤(pán)。 移動(dòng)端IOS遇到的兼容性問(wèn)題 和 Mac聯(lián)機(jī)調(diào)試方法 有時(shí)候遇到一些移動(dòng)端「疑難雜癥」，因?yàn)橐苿?dòng)端不方便調(diào)試，可能找不到問(wèn)題點(diǎn)，所以經(jīng)常需要電腦端和移動(dòng)端聯(lián)機(jī)調(diào)試，...

    CoreDump 評(píng)論0 收藏0

  • 移動(dòng)端用戶(hù)體驗(yàn)（UE）優(yōu)化歷程

    摘要：需求由于某企業(yè)對(duì)該產(chǎn)品的使用逐漸增加的手機(jī)端，而瀏覽較少，而該系統(tǒng)針對(duì)多是端，移動(dòng)端可以說(shuō)毫無(wú)用戶(hù)體驗(yàn)，現(xiàn)對(duì)移動(dòng)端進(jìn)行逐步優(yōu)化移動(dòng)端用戶(hù)體驗(yàn)。將原組件形成的樹(shù)形多選控件，轉(zhuǎn)換為移動(dòng)端。 前言 項(xiàng)目是用sap的BI智能決策分析系統(tǒng)，java運(yùn)用spring+springMVC+hibernate，數(shù)據(jù)庫(kù)運(yùn)用了sap企業(yè)的HANA內(nèi)存數(shù)據(jù)庫(kù)。前端技術(shù)采用bootstrap+datetime...

    Bowman_han 評(píng)論0 收藏0

  • 移動(dòng)端用戶(hù)體驗(yàn)（UE）優(yōu)化歷程

    摘要：需求由于某企業(yè)對(duì)該產(chǎn)品的使用逐漸增加的手機(jī)端，而瀏覽較少，而該系統(tǒng)針對(duì)多是端，移動(dòng)端可以說(shuō)毫無(wú)用戶(hù)體驗(yàn)，現(xiàn)對(duì)移動(dòng)端進(jìn)行逐步優(yōu)化移動(dòng)端用戶(hù)體驗(yàn)。將原組件形成的樹(shù)形多選控件，轉(zhuǎn)換為移動(dòng)端。 前言 項(xiàng)目是用sap的BI智能決策分析系統(tǒng)，java運(yùn)用spring+springMVC+hibernate，數(shù)據(jù)庫(kù)運(yùn)用了sap企業(yè)的HANA內(nèi)存數(shù)據(jù)庫(kù)。前端技術(shù)采用bootstrap+datetime...

    0xE7A38A 評(píng)論0 收藏0

  • 移動(dòng)端用戶(hù)體驗(yàn)（UE）優(yōu)化歷程

    摘要：需求由于某企業(yè)對(duì)該產(chǎn)品的使用逐漸增加的手機(jī)端，而瀏覽較少，而該系統(tǒng)針對(duì)多是端，移動(dòng)端可以說(shuō)毫無(wú)用戶(hù)體驗(yàn)，現(xiàn)對(duì)移動(dòng)端進(jìn)行逐步優(yōu)化移動(dòng)端用戶(hù)體驗(yàn)。將原組件形成的樹(shù)形多選控件，轉(zhuǎn)換為移動(dòng)端。 前言 項(xiàng)目是用sap的BI智能決策分析系統(tǒng)，java運(yùn)用spring+springMVC+hibernate，數(shù)據(jù)庫(kù)運(yùn)用了sap企業(yè)的HANA內(nèi)存數(shù)據(jù)庫(kù)。前端技術(shù)采用bootstrap+datetime...

    Brenner 評(píng)論0 收藏0

  • 移動(dòng)端自適應(yīng)布局方案

    摘要：背景現(xiàn)在工作中有超過(guò)一半的時(shí)間用于移動(dòng)端項(xiàng)目的開(kāi)發(fā)，包括嵌入頁(yè)，微信頁(yè)面和移動(dòng)頁(yè)。經(jīng)過(guò)研究，我在公司的多個(gè)移動(dòng)端項(xiàng)目使用了布局來(lái)解決移動(dòng)端自適應(yīng)布局的問(wèn)題。簡(jiǎn)單的說(shuō)它就是一個(gè)相對(duì)單位，布局是一個(gè)流行的解決移動(dòng)端響應(yīng)式布局的方案。 背景 現(xiàn)在工作中有超過(guò)一半的時(shí)間用于移動(dòng)端項(xiàng)目的開(kāi)發(fā)，包括app嵌入頁(yè)，微信頁(yè)面和移動(dòng)wap頁(yè)。 開(kāi)發(fā)移動(dòng)端頁(yè)面跟開(kāi)發(fā)PC頁(yè)面的一個(gè)大區(qū)別就是移動(dòng)端對(duì)響應(yīng)式布...

    zacklee 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

chaosx110

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<