移动页面开发的重要知识点整理

移动页面的开发中,有很多细节需要处理,meta、css的设置,下面摘录一些,方便后续翻阅。

移动页面开发的重要知识点整理

关闭对电话号码的自动识别

<meta name="format-detection" content="telephone=no">

关闭对邮件地址的自动识别

<meta name="format-detection" content="email=no">

链接拨号和发短讯

如果页面屏蔽了电话号码识别,但又希望某处可以通过链接拨打电话和发送短讯,你可以: <a href="tel:12345654321">打电话</a> <a href="sms:12345654321">发短信</a>

自动大写与自动修正

要关闭这两项功能,可以通过autocapitalize 与autocorrect 这两个选项: <input type="text" autocapitalize="off" autocorrect="off">

防止横竖屏切换时文本自动缩放

body{-webkit-text-size-adjust:none;}
需要注意的是,PC端已移除该属性,该属性只适用于移动端,前提需要定义meta viewport

关于伪元素动画

不要使用伪元素做动画,包括:animation和transition,因为较老的移动浏览器(占比还蛮高)不支持该特性,可以将伪元素替换为真实元素

关于补间动画关键字

我们知道补间动画 @keyframes 可以有2种方式来定义区间,如下: @keyframes{ from{...} to{...} } @keyframes{ 0{...} 100%{...} } 需要注意的是,对于第2种的安全写法是: @keyframes{ 0%{...} 100%{...} } 0%的百分比单位不能省略,在安卓较低版本上不支持该写法

关于偏移动画

对于这种动画,一定要使用transform做偏移,而不要使用absolute的top,right,bottom,left和粗暴的margin偏移。
使用transform偏移将几乎节省了所有由偏移所带来的reflow和repaint,同时节省了将位图从主线程同步到合成器线程的步骤 关于为CSS动画开启GPU加速
在动画的效果确实不佳的情况下,使用3D变形来开启GPU加速,更多的利用硬件能力。
transform: translate3d(0, 0, 0);
或者:
transform: translateZ(0);
需要注意的是3D变化会消耗更多的内存和功耗,所以何时使用,应该有一个权衡适度的过程

关于百分比宽高

有的时候,你发现自己为某个元素定义了高度为100%,但却发现在页面上找不到该元素,最后才定位到原来是高度为0,这是为什么?
因为该元素的包含块元素没有显式的定义高度。
需要注意的是:一些高级浏览器会根据content自动计算出包含块的高度,然后子元素的百分比能生效。

相关阅读