web页面一些移动端样式属性设置

1.有些页面在iPhone手机下的浏览器会出现点击有一个蒙版出现，可以通过以下css样式消除

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

2.移动端响应式页面要加上如下的表头

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

3.iPhone的Safari浏览器会识别一些电话号码加上了一些不好看的样式，可以通过以下meta标签消除

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

4.消除a链接的一些点击，访问等出现的一些样式

a { text-decoration: none; } a:hover { text-decoration: none; } a:hover,a:active,a:visited,a:link,a:focus{ -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; outline:none; background: none; text-decoration: none; color:#000000; }

5.页面自适应屏幕使用rem设计网页的宽度

<script> /* 长宽占位 rem算法, 根据root的rem来计算各元素相对rem, 默认html 320/20 = 16px */ function placeholderPic(){ var w = document.documentElement.offsetWidth; document.documentElement.style.fontSize=w/20+'px'; } placeholderPic(); window.onresize=function(){ placeholderPic(); } </script>

未完后续工作中涉及到再陆续添加