移动端1px解决方案

来源：互联网发布：网络数据传输原理详解编辑：程序博客网时间：2024/06/06 04:26
<span style="font-size:18px;"><html>    <head>        <title>1px question</title>        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">        <meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">        <style>            html {                font-size: 18px;            }            * {                padding: 0;                margin: 0;            }            .bds_b {                border-bottom: 1px solid #ccc;            }            .a,            .b {                margin-top: 1rem;                padding: 1rem;                font-size: 1.4rem;            }            .a {                width: 30rem;            }            .b {                background: #f5f5f5;                width: 20rem;            }        </style>        <script>            var viewport = document.querySelector("meta[name=viewport]");            //下面是根据设备像素设置viewport            if (window.devicePixelRatio == 1) {                viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no');            }            if (window.devicePixelRatio == 2) {                viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no');            }            if (window.devicePixelRatio == 3) {                viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no');            }            var docEl = document.documentElement;            var fontsize = 10 * (docEl.clientWidth / 320) + 'px';            docEl.style.fontSize = fontsize;        </script>    </head>    <body>        <div class="bds_b a">下面的底边宽度是虚拟1像素的</div>        <div class="b">上面的边框宽度是虚拟1像素的</div>    </body></html></span>
阅读全文
0 0