HTML5

移动端网页布局方法总结

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

Kntt

2 minute read

  1. 移动端,a、input标签被点击时查实的半透明灰色背景 描述:发生在wp操作系统中 <meta name="msapplication-tap-highlight" content="no"> 2.关闭IOS键盘首字母大写 描述: <input type="text" autocapitalize="off" /> 3.禁止文本缩放 描述: html { -webkit-text-size-adjust: 100%; } 4.清除输入框内阴影 描述:IOS中,输入框默认有内部阴影,但是无法用box-shadow来清除 input, textarea { border: 0; -webkit-appearance: none; } 5.忽略页面的数字为电话,忽略email 描述: <meta name="format-detection" content="telephone=no, email=no"/> 6.快速回弹滚动 描述:可以选择相应插件,iscroll,idangero swiper,文档一大堆; .xxx { overflow: auto; -webkit-overflow-scrolling: touch; } 7.禁止选中内容 描述:如果你不想用户可以选中页面中的内容,那么你可以在css中禁掉; .user-select-none { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } // 兼容ie6-9 <any onselectstart="return false;" unselectable="on"></any> 8.