移动前端开发经验指南-md文档.zip

# trip 移动端经验速递 ## 概要 本文档针对移动前端开发，包括 `Hybrid` 里面的web页面，非 `Native` 应用。 ## 适用 所有经验适用于：`iOS6.0+`, `Android4.0+` ## 目录 * [兼容性](#user-content-compatibility) * [CSS伪类:active](#user-content-active) * [清除iOS输入框内阴影](#user-content-input-shadow) * [修正iOS输入框禁用文本色](#user-content-input-disabled) * [Samsung S4圆角Bug](#user-content-s4-radius) * [边框圆角致背景溢出](#user-content-background-overflow) * [一个失败的圆（圆角）](#user-content-border-radius-percentage) * [不要使用伪元素动画](#user-content-pseudo-element-animation) * [:checked与兄弟选择符一起使用的bug](#user-content-checked-sibling-bug) * [为什么flex布局不生效](#user-content-flex) * [为什么小于12px字号不生效](#user-content-12px) * [chrome中body使用rem失效](#user-content-chrome-rem-bug) * [不要对html设置百分比大小的字号](#user-content-html-percent-font-size) * [经验](#user-content-experience) * [禁止保存或拷贝图像](#user-content-touch-callout) * [取消touch高亮](#user-content-tap-highlight-color) * [禁止选中内容](#user-content-user-select) * [快速回弹滚动](#user-content-overflow-scrolling) * [设置添加到主屏幕的Web App标题](#user-content-shortcut-title) * [设置添加到主屏幕的Web App图标](#user-content-shortcut-icon) * [添加到主屏幕时隐藏地址栏和状态栏（即全屏）](#user-content-hide-bar) * [添加到主屏幕时设置系统顶栏颜色](#user-content-status-bar-style) * [电话号码识别](#user-content-tel) * [邮箱地址识别](#user-content-email) * [关闭iOS键盘首字母自动大写](#user-content-autocapitalize) * [关闭iOS输入自动修正](#user-content-autocorrect) * [禁止文本缩放](#user-content-text-size-adjust) * [性能优化](#user-content-performance) <a name="compatibility"></a> ## 兼容性 <a name="active"></a> ### CSS伪类:active 如果你想使用元素的伪类来实现 `按下激活` 状态，那么你需要知道以下问题： * iOS上的几乎任何浏览器，定义元素的伪类 `:active` 都是无效； * Android上，`Android Browser` 和 `Chrome` 都支持伪类 `:active` ，其它第三方浏览器有部分不支持； * 定义了 `:active` 并且当前浏览器环境支持，当手指在滚动或者无意间的划过时，`:active` 状态都会被激活； > 为了规避上述所有的问题，如果需要 `按下激活` 状态，推荐使用 `js` 新增一个 `className` <a name="input-shadow"></a> ### 清除输入框内阴影 iOS上的几乎任何浏览器输入框（input, textarea）默认有内部阴影，但无法使用 `box-shadow` 来清除，如果不需要阴影，可以这样关闭： ```css input, textarea { /* 方法1: 去掉边框 */ border: 0; /* 方法2: 边框色透明 */ border-color: transparent; /* 方法3: 重置输入框默认外观 */ -webkit-appearance: none; appearance: none; } ``` <a name="input-disabled"></a> ### 修正iOS输入框禁用文本色 在 `iOS` 上，如果将输入框 `disabled`，此时输入框内的文字颜色将比 `color` 所定义的要浅，并且无法通过给输入框的伪类 `:disabled` 定义 `color` 来修正。 想解决这个问题，可以作如下设置，定义输入框的文本填充色： ```css input:disabled { -webkit-text-fill-color: #000; } ``` 需要注意的是，在 `Mac` 上的 `Safari` 也有同样的问题。 <a name="s4-radius"></a> ### Samsung S4圆角Bug `Samsung S4` 手机在 `Android Browser4.4.2` 上（其他版本未测），如果你使用了 `border-radius`，并且使用了 `-webkit-transform` 属性，当使用了 `translatez` 或者 `translate3d` 值，圆角会出现问题： ```css .test { border: 2px solid red; width: 50px; height: 50px; border-radius: 50%; background-color: gray; box-shadow: 0 2px 5px rgba(0, 0, 0, .3); -webkit-transform: translate(0, 0) translatez(0); transform: translate(0, 0) translatez(0); } ``` ```html <div class="test"></div> ``` 如上代码，`-webkit-transform: translate(0, 0) translatez(0)` 将会导致圆角无法包裹住 `background-color`。 当然，`-webkit-transform: translate3d(0, 0, 0)` 也是一样的，所以如果你的某个场景是这样的，那么可以直接使用 `-webkit-transform: translate(0, 0)` 来避免这个问题。 <a name="background-overflow"></a> ### 边框圆角致背景溢出 在红米和OPPO等手机某些版本的 `Android Webview` 中，如果一个元素定义了 `border` + `border-radius`，这时如果该元素有背景，那么背景将会溢出圆角之外。 之所以会出现这个问题：其主要原因是因为CSS对背景裁剪（background-clip）有不同的处理方式，通常它可以是 `border-box | padding-box | content-box` 这3种方式。 浏览器的默认裁减方式是 `border-box`，即溢出 `border` 之外的背景都将被裁减。 对于上述无法裁减边框之外背景的手机，将值定义为 `padding-box | content-box` 都能fix这问题，不过更推荐使用 `padding-box`。因为使用 `content-box`，如果定义了 `padding` 不为 `0`，背景将无法铺满元素。 <a name="border-radius-percentage"></a> ### 一个失败的圆（圆角） 在移动平台上开发时，用CSS画一个圆很简单，只需要一句代码： ```css .circle { border-radius: 50%; } ``` 不过，在 `Android Browser2.*` 上，这个定义将会失效，而显示为默认的矩形。 因为 `Android Browser2.*` 不支持以 `百分比` 作为 `border-radius` 的值，所以如果你需要兼容 `Android Browser2.*`，那么你可以这样： ```css .circle { width: 10rem; height: 10rem; border-radius: 5rem; } ``` 如果你觉得这样定义不够灵活，想懒一点，那么其实可以给 `border-radius` 预设一个比较大的值，比如 `100rem`，用以避免当元素的尺寸变了，圆角半径也得跟着变，除非元素的尺寸超出了你预设的阀值。 <a name="pseudo-element-animation"></a> ### 不要使用伪元素动画 有的时候你可能会为了减少页面上的DOM数，而使用伪元素。但如果你想给伪元素增加 `animation` 或者 `transition` 动画，这时候会碰上支持性问题。 如果你的项目需要支持以下系统版本，那么建议直接使用真实元素： * `iOS Safari6.1及以下` * `Android Browser4.1.*及以下`，包括一些深度定制的系统，比如： * 魅族 - Flyme OS 4.1.1.1C及以下（比这高的版本尚未测试过）- **咱国产能别这么坑么（安卓版本为4.4.4的魅族MX4 pro）** <a name="checked-sibling-bug"></a> ### :checked与兄弟选择符一起使用的bug 在 `Android Browser4.2.*及以下`（可能版本稍有出入）（包括坑爹的Flyme），如果你有这样一段代码： ```css input:checked ~ .test { background-color: #f00; } ``` 那么将无任何效果，如果你想使得上述代码生效，有2种方式： 第一种，使用 `input` 和 `+` 进行激活： ```css html + input {} input:checked ~ .test { background-color: #f00; } ``` 只要存在 `input`和 `+` 选择符配合使用的选择器（空规则集也行）即可使得上述代码激活生效。 第二种，直接换成 `+`： ```css input:checked + .test { background-color: #f00; } ``` <a name="flex"></a> ### 为什么flex布局不生效 * 使用[块级元素](http://blog.doyoe.com/2015/03/09/css/%E8%A7%86%E8%A7%89%E6%A0%BC%E5%BC%8F%E5%8C%96%E6%A8%A1%E5%9E%8B%E4%B8%AD%E7%9A%84%E5%90%84%E7%A7%8D%E6%A1%86/#block-level-element)作为 `flex items（flex子项）`； > `Android Browser4.3及以下`，`iOS Safari6.1及以下` 的 `flex子项` 需要使用块级元素，在这些版本之上还可以使用行内块元素 > 在这些版本中，如果你发现flex子项之间出现了间隙，或者在未定义换行的情况下子项自身