移动端前端笔记大全
1、关闭iOS键盘首字母自动大写
IOS的机子，默认英文输入法状态下，首字母是自动大写的，有时候挺烦人的。
我们写页面的时候有没有办法把这个自动大写关闭呢？autocapitalize的属性可以实现：
在iOS中，默认情况下键盘是开启首字母大写的功能的，如果业务不想出现首字母大写，可以这样：
<
input
type
=
"text"
autocapitalize
=
"off"
/>
|
2、关闭iOS输入自动修正
和英文输入默认自动首字母大写那样，IOS还做了一个功能，默认输入法会开启自动修正输入内容，这样的话，用户经常要操作两次。所以这个功能有方便和不方便之处，如果有些业务不需要这个功能，可以通过前端代码关闭。
如果不需要的话，可以这样：
<
input
type
=
"text"
autocorrect
=
"off"
/>
|
3、禁止文本缩放
当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，当我们不需要这种情况时，可以选择禁止：
html {
-webkit-text-size-adjust:
100%
;
}
|
需要注意的是，PC端的该属性已经被移除，该属性在移动端要生效，必须设置 `meta viewport'。
4、移动端如何清除输入框内阴影
在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：
input,
textarea {
border
:
0
;
/* 方法1 */
-webkit-appearance:
none
;
/* 方法2 */
}
|
5、邮箱地址识别
今天来mark一下在做移动端开发时，如何做邮箱地址识别：
在 Android （iOS不会）上，浏览器会自动识别看起来像邮箱地址的字符串，不论有你没有加上邮箱链接，当你在这个字符串上长按，会弹出发邮件的提示。
关闭邮箱地址识别：
<
meta
name
=
"format-detection"
content
=
"email=no"
/>
|
开启邮件发送：
|
|
6、移动端手机号码识别
在 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
|
（3）开启短信功能：
<
a
href
=
"sms:123456"
>123456
|
7、快速回弹滚动
我们先来看看回弹滚动在手机浏览器发展的历史：
- 早期的时候，移动端的浏览器都不支持非body元素的滚动条，所以一般都借助 iScroll;
- Android 3.0/iOS解决了非body元素的滚动问题，但滚动条不可见，同时iOS上只能通过2个手指进行滚动；
- Android 4.0解决了滚动条不可见及增加了快速回弹滚动效果，不过随后这个特性又被移除；
- iOS从5.0开始解决了滚动条不可见及增加了快速回弹滚动效果
在iOS上如果你想让一个元素拥有像 Native 的滚动效果，你可以这样做：
.xxx {
overflow
:
auto
;
/* auto | scroll */
-webkit-overflow-scrolling: touch;
}
|
PS：iScroll用过之后感觉不是很好，有一些诡异的bug，这里推荐另外一个 iDangero Swiper，这个插件集成了滑屏滚动的强大功能（支持3D），而且还有回弹滚动的内置滚动条，官方地址：
http://www.idangero.us/sliders/swiper/index.php
8、移动端禁止选中内容
如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉：
div {
-webkit-user-select:
none
;
}
|
就这么简单，但是目前只支持webkit内核的浏览器。
9、移动端取消touch高亮效果
在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过css以下方法来禁止：
.xxx {
-webkit-tap-highlight-
color
: rgba(
0
,
0
,
0
,
0
);
}
|
这个设置，在大部分机子上都是起效果的。但是，移动端三星自带浏览器，点击页面任意a标签时，设置-webkit-tap-highlight-color:rgba(0,0,0,0)还是会有阴影底色，这应该是浏览器强制加上去的，通过代码设置也无法覆盖。
有一种妥协的方法是把页面非真实跳转链接的a标签换成其它标签，可以解决这个问题。
10、如何禁止保存或拷贝图像
做移动端H5页面时，经常踩到不少坑，感觉也是时候整理一下移动端开发笔记了，遇到问题能够快速响应，节省开发时间。今天先mark一下在移动端如何禁止保存或拷贝图像：
通常当你在手机或者pad上长按图像 img ，会弹出选项 存储图像 或者 拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止：
img {
-webkit-touch-callout:
none
;
}
|
PS：需要注意的是，该方法只在 iOS 上有效。