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>