移动 Web 开发技巧

[mishe]

锁定 viewport

ontouchmove="event.preventDefault()" //锁定viewport，任何屏幕操作不移动用户界面（弹出键盘除外）。

当前点击元素样式：

-webkit-tap-highlight-color: 颜色

阻止屏幕旋转时字体自动调整

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

居中问题

居中是移动端跟pc端共同的噩梦。这里有两种兼容性比较好的新方案。

table布局法

.box{ text-align:center; display:table-cell; vertical-align:middle; }

老版本flex布局法

.box{ display:-webkit-box; -webkit-box-pack: center; -webkit-box-align: center; text-align:center; }

input类型为date情况下不支持placeholder

这其实是浏览器自己的处理。因为浏览器会针对此类型 input 增加 datepicker 模块。

对 input type date 使用 placeholder 的目的是为了让用户更准确的输入日期格式，iOS 上会有 datepicker 不会显示 placeholder 文字，但是为了统一表单外观，往往需要显示。Android 部分机型没有 datepicker 也不会显示 placeholder 文字。

桌面端（Mac）

Safari 不支持 datepicker，placeholder 正常显示。
Firefox 不支持 datepicker，placeholder 正常显示。
Chrome 支持 datepicker，显示 年、月、日 格式，忽略 placeholder。

移动端

iPhone5 iOS7 有 datepicker 功能，但是不显示 placeholder。
Andorid 4.0.4 无 datepicker 功能，不显示 placeholder

解决方法：

因为text是支持placeholder的。因此当用户focus的时候自动把type类型改变为date，这样既有placeholder也有datepicker了

消除transition闪屏

两个方法：使用css3动画的时尽量利用3D加速，从而使得动画变得流畅。动画过程中的动画闪白可以通过 backface-visibility 隐藏。

-webkit-transform-style: preserve-3d;
/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-backface-visibility: hidden;
/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/

测试是否支持svg图片

document.implementation.hasFeature("http:// www.w3.org/TR/SVG11/feature#Image", "1.1")

消除ie10里面的那个叉号

IE Pseudo-elements

input:-ms-clear{display:none;}

使用特殊链接：

如果你关闭自动识别后 ，又希望某些电话号码能够链接到 iPhone 的拨号功能 ，那么可以通过这样来声明电话链接 ,

<a href="tel:12345654321">打电话给我</a>
<a href="sms:12345654321">发短信</a>

或用于单元格：

<td onclick="location.href='tel:122'">

自动大写与自动修正

要关闭这两项功能，可以通过autocapitalize 与autocorrect 这两个选项：

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

不让 Android 识别邮箱

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

禁止 iOS 弹出各种操作窗口

-webkit-touch-callout:none

禁止用户选中文字

-webkit-user-select:none

Andriod 上去掉语音输入按钮

input::-webkit-input-speech-button {display: none}