移动端响应式布局
<script> var pixclPation = 1/window.devicePixelRation; document.write('<meta name="viewport" content="width=device-width,initial-scale='+pixelRatio+',minimum-scale='+pixelRatio+',maximum-scale='+pixelRatio+'" />'); </script>
1.通过设置缩放比例,让1px做1px的事情。这样就不会出现在不同屏幕时候,1px显示不是1px的情况。
var html = document.getElementsByName('html')[0]; var pageWidth = html.getBoundingClientRect().width; html.style.fontSize = pageWidth/16 + 'px';
2.设置em,这样根据字体来响应式布局
html{ width: 100%; height: 100%; overflow: hidden; } body{ width: 100%; height: 100%; overflow: auto; }
3.让body来控制页面的尺寸
a { //取消a标签手指按下时出现的黑色遮罩层 -webkit-tap-highlight-color: transparent; text-decoration: none; } input{ //解决ios下表单元素圆角的问题 -webkit-appearance: normal; }