移动开发小技巧

1、页面meta之viewport

<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">

width可是宽度，initial-scale初始化缩放比例
maximum-scale允许用户缩放的最大比例
minimum-scale允许用户缩放的最小比例
user-scalable是否允许用户缩放

2、关闭iOS键盘首字母自动大写
    IOS的机子，默认英文输入法状态下，首字母是自动大写的，有时候挺烦人的，  如果想关闭自动大写可以通过autocapitalize属性实现：

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

 

3、关闭iOS输入自动修正

　　如果不需要的话，可以这样：

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

 

4、禁止文本缩放

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

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

 

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

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

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

 

6、邮箱地址识别

　　关闭邮箱地址识别：

关闭邮箱地址识别：
<meta name="format-detection" content="email=no" />
开启邮件发送：
<a mailto:[email protected]">[email protected]</a>

 

7、移动端手机号码识别

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

 

8、快速回弹滚动

    我们先来看看回弹滚动在手机浏览器发展的历史：
    * 早期的时候，移动端的浏览器都不支持非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

 

9、移动端禁止选中内容

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

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

 

10、移动端取消touch高亮效果
    在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过css以下方法来禁止：

.xxx {
    -webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios点击元素时出现的阴影。
}

 

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

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

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

 

12、动画加速

　　-webkit-transform:translate3d(0, 0, 0)

　　在ios下可以让动画更加流畅（这个属性会调用硬件加速模式），但是在android下不可乱用，会产生很多见所未见的bug。