移动端网页布局中需要注意事项以及解决方法总结

winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉

<meta name="msapplication-tap-highlight" content="no">

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

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

2、禁止文本缩放

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

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

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

input,
textarea {
border: 0;
-webkit-appearance: none;
}

4、忽略页面的数字为电话，忽略email识别

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

5、快速回弹滚动

.xxx {
overflow: auto;
-webkit-overflow-scrolling: touch;
}

PS：iScroll用过之后感觉不是很好，有一些诡异的bug，这里推荐另外一个 iDangero Swiper，这个插件集成了滑屏滚动的强大功能（支持3D），而且还有回弹滚动的内置滚动条，官方地址： http://www.idangero.us/sliders/swiper/index.php

6、移动端禁止选中内容

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

7、移动端取消touch高亮效果

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

.xxx {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}	

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

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

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

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

9、解决字体在移动端比例缩小后出现锯齿的问题

-webkit-font-smoothing: antialiased;

10、栅格布局：

box-sizing:border-box;可以改变盒子模型的计算方式方便你设置宽进行自适应流式布局

实例