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>
扫一扫
1462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
