移动端前端笔记大全

最近一直在整理一些作移动端时遇到的问题，如今把他们列在一块儿，方便收藏查找：

一、关闭iOS键盘首字母自动大写

IOS的机子，默认英文输入法状态下，首字母是自动大写的，有时候挺烦人的。

咱们写页面的时候有没有办法把这个自动大写关闭呢？autocapitalize的属性能够实现：

在iOS中，默认状况下键盘是开启首字母大写的功能的，若是业务不想出现首字母大写，能够这样：

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

二、关闭iOS输入自动修正

和英文输入默认自动首字母大写那样，IOS还作了一个功能，默认输入法会开启自动修正输入内容，这样的话，用户常常要操做两次。因此这个功能有方便和不方便之处，若是有些业务不须要这个功能，能够经过前端代码关闭。

若是不须要的话，能够这样：

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

三、禁止文本缩放

当移动设备横竖屏切换时，文本的大小会从新计算，进行相应的缩放，当咱们不须要这种状况时，能够选择禁止：

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

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

四、移动端如何清除输入框内阴影

在iOS上，输入框默认有内部阴影，但没法使用 box-shadow 来清除，若是不须要阴影，能够这样关闭：

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

五、邮箱地址识别

今天来mark一下在作移动端开发时，如何作邮箱地址识别：

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

关闭邮箱地址识别：

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

开启邮件发送：

<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

六、移动端手机号码识别

在 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>

七、快速回弹滚动

咱们先来看看回弹滚动在手机浏览器发展的历史：

• 早期的时候，移动端的浏览器都不支持非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

<

div>

八、移动端禁止选中内容

若是你不想用户能够选中页面中的内容，那么你能够在css中禁掉：

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

就这么简单，可是目前只支持webkit内核的浏览器。

九、移动端取消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标签换成其它标签，能够解决这个问题。

十、如何禁止保存或拷贝图像

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

一般当你在手机或者pad上长按图像 img ，会弹出选项 存储图像 或者 拷贝图像，若是你不想让用户这么操做，那么你能够经过如下方法来禁止：

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

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

出处：w3cmark (http://www.w3cmark.com/2015/398.html)