關於移動端頁面的平常總結

時間 2019-11-13

標籤關於移動頁面平常總結欄目無線简体版

原文原文鏈接

1.移動端個別css樣式javascript

a：去掉觸屏端點擊陰影css

a {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
}html

b：文字渲染-強制抗鋸齒
-webkit-font-smoothing: antialiased;
-webkit-text-stroke: 1px transparent;
text-shadow: rgba(0,0,0,.01) 0 0 1px;java

c：關於文字強行換行（pc適用）ios

word-break:break-all;只對英文起做用，以字母做爲換行依據css3

word-wrap:break-word; 只對英文起做用，以單詞做爲換行依據，web

white-space:pre-wrap; 只對中文起做用，強制換行瀏覽器

white-space:nowrap; 強制不換行，都起做用ide

white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不換行，超出部分隱藏且以省略號形式出現佈局

2.移動端字體

我使用的是
font-family: "微軟雅黑", "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
微軟雅黑不是必須的，移動端沒有微軟雅黑字體（只爲個別在pc端觀看體驗好點）

安卓跟ios的系統默認字體基本上都是無襯線字體，區別不大。

3.移動端rem佈局的文字居中問題

主要出現：rem佈局中會出現一樣的行高或者padding值在--安卓跟ios不一樣系統--下表現不同。

具體表現：例如，這種小標籤（大標籤也是有的，可是通常看不出來，小的比較明顯），會出如今ios偏下，安卓偏上的狀況

出現緣由：rem佈局中，瀏覽器在渲染的時候相對值轉換成絕對值的時候會四捨五入的省略小數，（jq或者js獲取頁面元素寬高的時候，取的值是4舍5入的整數）

解決辦法：個人解決辦法是在頁面剛開始判斷手機系統，而後給html標籤添加對應的class名，而後有針對性的定義樣式。

4.頁面中全屏引導圖設置隱藏，可是會閃一下

主要表現：頁面中若是有全屏引導圖設置了隱藏，可是剛打開頁面仍是會閃出來一下。

出現緣由：多是外鏈的css類，加載渲染速度不夠快。

解決辦法：直接在html中添加行間樣式。style="display:none;"。提升css樣式層級速度。

5.移動端中的運動

a：能用css不用js，js的話運動會有卡頓，用戶體驗麼有css3的好。

b：關於位移，儘可能用transform，少用margin-top，top之類。

c：頁面中的滾動有時候會出現重影，多半父級的定位引發，去掉就好。

6.移動端click延遲問題

ckick事件在移動端會有300ms的延遲，並且是能明顯感受到的

我通常都是用touch事件模擬點擊下邊是js原生的寫法

    <body>
        <div id="div"></div>
    </body>
    <script type="text/javascript">
        var odiv = document.getElementById('div');
        var onOff=true;//用來判斷是不是點擊的開關
        /*touchstart事件只要按下就會觸發可是會有滑動頁面的狀況，
         * 因此這裏只是更改判斷條件，觸發的話開關開啓。
         * */
        odiv.addEventListener('touchstart',function(){
            onOff=true;
        })
        /*若是有滑動頁面的狀況纔會觸發touchmove事件，
         * 單純按下擡起的話不會觸發，觸發的話開關關閉
         * */
        odiv.addEventListener('touchmove',function(){
            onOff=false;
        })
        /*根據開關狀況判斷是單純點擊仍是滑動頁面，滑動的話直接return*/
        odiv.addEventListener('touchend',function(){
            if(!onOff) return;
            alert('模擬點擊事件');
        })    
    </script>

下邊是jq的寫法

var onOff=true;
var odiv=$('#div')
odiv.on('touchstart',function(){
    onOff=true;
})
odiv.on('touchmove',function(){
    onOff=false;
})
odiv.on('touchend',function(){
    if(!onOff) return;
        alert('模擬點擊事件');
})

7.判斷手機系統

window.onload = function () {
     var u = navigator.userAgent;//返回用戶代理頭的字符串(包括瀏覽器版本信息等) if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手機
             alert("安卓手機");
             // window.location.href = "mobile/index.html";
         } else if (u.indexOf('iPhone') > -1) {//蘋果手機
             // window.location.href = "mobile/index.html";
             alert("蘋果手機");
         } else if (u.indexOf('Windows Phone') > -1) {//winphone手機
            alert("winphone手機");
             // window.location.href = "mobile/index.html";
      }
 }

8.表單彈出鍵盤，頁面中的定位會出現bug

主要出如今ios下的uc瀏覽器。

具體表現：當點擊表單彈出鍵盤的時候，頁面中若是有頂部或底部的固定定位，定位會失效。

出現緣由：滾動溢出。

解決方法：彈出的固定層，阻止touchmove的默認事件，即e.preventDefault()。不過並不能徹底解決，仍是會出現小的位置錯誤。

9.ios下click事件不冒泡，事件委託附不上去

a.若是是定位類，受元素位置影響。能夠把元素放到頁面html結構中較上的位置。

b.對目標元素使用CSS cursor:pointer。

c.使用原生的支持click冒泡到document的元素，例如a和button。

10.h5 video標籤的具體兼容表現

下面是video視頻在播放的時候各個瀏覽器的不一樣表現：

安卓系統下播放中

瀏覽器名稱	瀏覽器版本	正常位置無定位	fixed固定定位	播放時層級
uc	11.4.2.936	默認自動固定到頂部	正常	無限高
qq	6.6.0.2300	滑動到頂部之後，會固定在頂部	正常	無限高
百度	V7.0	天然位置	定位有效，上下滑動頁面，視頻抖動嚴重	無限高
搜狗	5.5.1.23552	天然位置	定位有效，向上滑動頁面，視頻抖動	正常
google	49.0.2623.105	天然位置	正常	正常
獵豹	4.36.4	天然位置	全屏播放	全屏播放
歐朋	12.5.0.9	天然位置	正常	正常
火狐	45.0.2	天然位置	正常	正常

ios系統下播放中

瀏覽器名稱	瀏覽器版本	正常位置無定位	fixed固定定位	播放時層級
uc	11.4.9.940	全屏，只能關閉播放或小窗播放	全屏，只能關閉播放或小窗播放	全屏，只能關閉播放或小窗播放
qq	7.3.0.2956	滑動到頂部之後，會固定在頂部，視頻窗口可拖動	不生效滑動到頂部之後，會固定在頂部，視頻窗口可拖動	無限高，視頻窗口可拖動
自帶safari	ios10.2.1系統	全屏，退出後正常	全屏，退出後正常	全屏，退出後正常

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。