做移动端的项目已经有段时间了,期间遇坑不断。特别整理出移动端中常见和不常见的用法、属性,以防再次入坑。不间断更新中...

Mobile Viewport

<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边
content 参数:

  • width viewport 宽度(数值/device-width)
  • height viewport 高度(数值/device-height)
  • initial-scale 初始缩放比例
  • maximum-scale 最大缩放比例
  • minimum-scale 最小缩放比例
  • user-scalable 是否允许用户缩放(yes/no)
  • minimal-ui iOS 7.1 beta 2 中新增属性,可以在页面加载时最小化上下状态栏。这是一个布尔值,可以直接这样写:<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

iOS设备

添加到主屏后的标题(iOS 6 新增)
<meta name="apple-mobile-web-app-title" content="标题">

是否启用 WebApp 全屏模式
<meta name="apple-mobile-web-app-capable" content="yes" />

设置状态栏的背景颜色
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
只有在 "apple-mobile-web-app-capable" content="yes" 时生效
content 参数:

  • default 默认值。
  • black 状态栏背景是黑色。
  • black-translucent 状态栏背景是黑色半透明。
  • 如果设置为 default 或 black ,网页内容从状态栏底部开始。
  • 如果设置为 black-translucent ,网页内容充满整个屏幕,顶部会被状态栏遮挡。

禁止数字识自动别为电话号码
<meta name="format-detection" content="telephone=no" />

点击与click事件

对于a标记的点击导航,默认是在onclick事件中处理的。而移动客户端对onclick的响应相比PC浏览器有着明显的几百毫秒延迟。
在移动浏览器中对触摸事件的响应顺序应当是:
ontouchstart -> ontouchmove -> ontouchend -> onclick
因此,如果确实要加快对点击事件的响应,就应当绑定ontouchend事件。
使用click会出现绑定点击区域闪一下的情况,解决:给该元素一个样式如下
-webkit-tap-highlight-color: rgba(0,0,0,0);
如果不使用click,也不能简单的用touchstart或touchend替代,需要用touchstart的模拟一个click事件,并且不能发生touchmove事件,或者用zepto中的tap(轻击)事件。
body{-webkit-overflow-scrolling: touch;}

特殊链接

关闭自动识别后 ,又希望某些电话号码能够链接到 iPhone 的拨号功能 ,那么可以通过这样来声明电话链接:
<a href="tel:138454545xx">拨打电话</a> <a href="sms:138454545xx">发短信</a>

关闭自动大写与自动修正

<input type="text" autocapitalize="off" autocorrect="off" />