移动端经验速递

本文档针对移动前端开发，包括 Hybrid 里面的web页面，非 Native 应用。

所有经验适用于：iOS6.0+, Android4.0+

• 兼容性
  • CSS伪类:active
  • 清除iOS输入框内阴影
  • Samsung S4圆角Bug
• 经验
  • 禁止保存或拷贝图像
  • 取消touch高亮
  • 禁止选中内容
  • 快速回弹滚动
  • 手机号码识别
  • 邮箱地址识别
  • 关闭iOS键盘首字母自动大写
  • 关闭iOS输入自动修正
  • 禁止文本缩放
• 待续...

如果你想使用元素的伪类来实现激活状态，那么你需要知道以下问题：

1. iOS（非PC）上任何元素的伪类 :active 都无效；
2. Android上，Android Browser 和 Chrome 都支持伪类 :active ，其它第三方浏览器基本上都不支持；

在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：

input,
textarea {
	border: 0; /* 方法1 */
	-webkit-appearance: none; /* 方法2 */
}

Samsung S4 手机在 Android 4.4.2 的 Android Browser 上，如果你使用了 border-radius，并且使用了 -webkit-transform 属性，那么某些情况下，圆角会出现问题：

<style>
.test {
	border: 2px solid red;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: gray;
	box-shadow:0 2px 5px rgba(0, 0, 0, 0.3);
	-webkit-transform: translate(0, 0) translatez(0);
	transform: translate(0, 0) translatez(0);
}
</style>
<div class="test"></div>

如上代码，-webkit-transform: translate(0, 0) translatez(0) 将会导致圆角无法包裹住 background-color。

当然，-webkit-transform: translate3d(0, 0, 0) 也是一样的，所以如果你的某个场景是这样的，那么可以直接使用 -webkit-transform: translate(0, 0) 来避免这个问题。

通常当你在手机或者pad上长按图像 img ，会弹出选项 存储图像 或者 拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止：

img {
	-webkit-touch-callout: none;
}

需要注意的是，该方法只在 iOS 上有效。

在移动设备上，所有设置了伪类 :active 的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过以下方法来禁止：

.xxx {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

如果你不想用户可以选中页面中的内容，那么你可以禁掉：

html {
	-webkit-user-select: none;
}

1. 早期的时候，移动端的浏览器都不支持非body元素的滚动条，所以一般都借助 iScroll;
2. Android 3.0/iOS解决了非body元素的滚动问题，但滚动条不可见，同时iOS上只能通过2个手指进行滚动；
3. Android 4.0解决了滚动条不可见及增加了快速回弹滚动效果，不过随后这个特性又被移除；
4. iOS从5.0开始解决了滚动条不可见及增加了快速回弹滚动效果

在iOS上如果你想让一个元素拥有像 Native 的滚动效果，你可以这样做：

.xxx {
	overflow: auto; /* auto | scroll */
	-webkit-overflow-scrolling: touch;
}

在 iOS Safari （其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：

• 7位数字，形如：1234567
• 带括号及加号的数字，形如：(+86)123456789
• 双连接线的数字，形如：00-00-00111
• 11位数字，形如：13800138000

可能还有其他类型的数字也会被识别，但在具体的业务场景中，有些时候这是不必须的，所以你可以关闭电话自动识别，然后在需要拨号的地方，开启电话呼出和短信功能。

1. 关闭电话识别：

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

2. 开启电话功能：

<a href="tel:123456">123456</a>

3. 开启短信功能：

<a href="sms:123456">123456</a>

在 Android （iOS不会）上，浏览器会自动识别看起来像邮箱地址的字符串，不论有你没有加上邮箱链接，当你在这个字符串上长按，会弹出发邮件的提示。

1. 关闭邮箱地址识别：

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

2. 开启邮件发送：

<a mailto:[email protected]>[email protected]</a>

如果想同时关闭电话和邮箱识别，可以把它们写到一条 meta 内，代码如下：

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

在iOS中，默认情况下键盘是开启首字母大写的功能的，如果业务不想出现首字母大写，可以这样：

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

在iOS中，默认输入法会开启自动修正输入内容的功能，如果不需要的话，可以这样：

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

当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，当我们不需要这种情况时，可以选择禁止：

html {
	-webkit-text-size-adjust: 100%;
}

需要注意的是，PC端的该属性已经被移除，该属性在移动端要生效，必须设置 `meta viewport'

待续啊待续。。。