您的位置：首页 > 移动开发

移动端常见问题总结

2017-03-18 20:05 423 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 移动端 html css

相关文章推荐

新的分享

章节导航