移動端常見問題總結

qq瀏覽器

x5內核瀏覽器強制橫屏或豎屏顯示<meta name="x5-orientation" content="portrait|landscape" />

全屏顯示<meta name="x5-fullscreen" content="true" />


UC瀏覽器

強制橫屏或豎屏顯示<meta name="screen-orientation" content="portrait|landscape" />

全屏顯示<meta name="full-screen" content="yes" />


IOS10 meta user-scalable=no 無效,body或html overflow: hidden無效

使用阻止touchstart事件來模擬

document.addEventListener('touchstart',function(e){e.preventDefault();})

它還可以:

1. 禁止長按選中文字、選中圖片、彈出系統菜單

2. 禁止系統滾動條、組織橡皮筋效果(下拉回彈效果)

3. 解決點透問題

4. 也阻止了input等元素獲取焦點,可以通過手動爲這些元素綁定touchstart阻止冒泡來解決

$('input').addEventListener('touchstart',function(e){e.stopPropogation();});


常見設置

禁止識別電話號碼或郵箱<meta name="format-detection" content="telephone=no,email=no" />

允許識別電話號碼<a href="tel:13524565456">13524565456</a>

允許識別郵件<a href="mailto:郵箱地址">郵箱地址</a>


設置超鏈接點擊時背景色a,input,button{-webkit-tap-highlight-color: rgba(0,0,0,0)}


去除按鈕默認圓角: input,button{-webkit-appearance:none;border-radius:0;}


禁止用戶修改字體大小: body *{-webkit-text-size-adjust: 100%;}


禁止用戶選中文字設置:  -webkit-user-select: none;


fontboosting: https://zhidao.baidu.com/question/1514399955942799500.html


固定定位fixed在頁面滑動的時候抖動問題: 

html設置溢出隱藏,頂部和底部絕對定位,然後讓main出滾動條,margin-top: header高度,margin-bottom: footer高度,這樣就不需要fixed

<body>

<header></header>

<main></main>

<footer></footer>

</body>


ios safri爲body設置了溢出隱藏,依然可以橫向拖動:

爲body設置相對定位,爲wrap設置overflow: auto

body{

height: 100%;

margin: 0;

overflow: hidden;

position: relative;

}

#wrap{

height: 100%;

overflow: auto;

}


<body>

<div id="wrap">

<header></header>

<main></main>

<footer></footer>



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章