横竖屏限制问题
<meta name = "x5-orientation" content="portrait | landscape" />
只支持x5内核
<meta name = "screen-orientation" content="portrait" />
只支持UC浏览器
全屏限制问题
<meta name = "x5-fullscreen" content="true" />
只支持x5内核
<meta name = "full-screen" content="yes" />
只支持UC浏览器
禁止识别电话号码和邮箱
<meta name = "format-detection" content="telephone=no,email=no" />
禁止识别之后,页面当中所有的邮箱和电话将不会识别,如果有特殊需求,要配合一下代码实现
<a href="tel:110">请拨打110</a>
<a href="mailto:qq@.com">请发送邮件qq@.com</a>
消除链接\表单\按钮默认背景
-webkit-tap-highlight-color: rgba(0,0,0,0);
消除按钮圆角
-webkit-appearance: none;
移动端字体
- iOS系统
默认中文字体是 Heiti SC
默认英文字体是 Helvetica
默认数字字体是 HelveticaNeue
无微软雅黑字体 - Android系统
默认中文字体是 Droidsansfallback
默认英文和数字字体 Droid Sans
无微软雅黑字体 - winphone 系统
默认中文字体是 Dengxian(方正等线体)
默认英文和数字字体是 Segoe
无微软雅黑字体 - 结论
各个手机系统有自己的默认字体,且都不支持微软雅黑
如无特殊需求,手机端无需定义中文字体,使用系统默认
英文字体和数字字体可以使用 Helvetica,三种系统都支持
body{font-family:Helvetica;}
禁止用户设置字体大小
-webkir-text-size-adjust:100%;
禁止复制、文字选中
-webkit-user-select:none;//安卓不支持
字体增强 font boosting
移动端设备为了使用户能看清楚大批量的字体,会自动对字体进行放大,但是只要指定了容器的高度,就能解决
p{max-height:999999px}
调用原生滚动事件
-webkit-overflow-scrolling:touch;
CSS 动画页面闪白,动画卡顿
解决办法:
- 尽可能地使用合成属性transform和opacity来设计CSS3动画,不适用position的left和top来定位
- 使用CSS3 动画的时候尽量利用3D加速,从而使得动画变得流畅。动画过程中的动画闪白可以通过 backface-visibility隐藏
-webkit-transform: tanslate3d(0,0,0);
fixed 定位缺陷
- iOS 下 fixed元素容易定位出错,软键盘弹出时,影响fixed元素定位
- Android下 fixed 表现要比iOS好,软键盘弹出时,不会影响fixed元素定位
- iOS下不支持position:fixed
解决方案 :可以用iScroll插件解决这个问题
阻止旋转屏幕是自动调整字体大小
-webkir-text-size-adjust:100%;
上下拉动滚动条时卡顿
body{-webkit-overflow-scrolling:touch;overflow-scrolling-touch;}