移动端笔记--代码分享

移动端经常遇到的一些小总结，方便·以后使用：

1.关闭iOS键盘首字母自动大写

IOS的机子，默认英文输入法状态下，首字母是自动大写的，autocapitalize的属性可以实现关闭首字母大写：

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

2.关闭iOS输入自动修正

和英文输入默认自动首字母大写那样，IOS做一个功能，默认输入法会开启自动修正输入内容，这样的话，用户经常要操作两次。所以这个功能有方便和不方便之处，如果有些业务不需要这个功能，可以通过前端代码关闭。
    <input type="text" autocorrect="off" />

3.禁止文本缩放

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

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

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

4.移动端如何清除输入框内阴影

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

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

5.邮箱地址识别

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

关闭邮箱地址识别：<meta name="format-detection" content="email=no" />

开启邮件发送：     <a mailto:"[email protected]">[email protected]</a>

6.移动端手机号码识别

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

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

关闭电话识别：<meta name="format-detection" content="telephone=no" />

  开启电话功能：<a href="tel:123456">123456</a>

开启短信功能：<a href="sms:123456">123456</a>

7.移动端禁止选中内容

如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉(只有webkit支持)：div {-webkit-user-select: none;}

8.移动端取消touch高亮效果

在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过css以下方    法来禁止：.xxx {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

9.如何禁止保存或拷贝图像

做移动端H5页面时，经常踩到不少坑，感觉也是时候整理一下移动端开发笔记了，遇到问题能够快速响应，节省开发时间。今天先mark一下在移动端如何禁止保存或拷贝图像：

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

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

10.快速回弹滚动

早起，移动端的浏览器都不支持非body元素的滚动条，所以一般都借助 iScroll;

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