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

来源:互联网 发布:天下三男号捏脸数据 编辑:程序博客网 时间:2024/05/20 18:48

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>

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

原创粉丝点击