移动端网页布局注意事项及解决
1.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 的元素,默认都会在激活状态时&