【Html】【UI适配】移动端通过像素比适配1物理像素

最新推荐文章于 2023-08-24 17:24:25 发布

命运之手

最新推荐文章于 2023-08-24 17:24:25 发布

阅读量585

点赞数

分类专栏： android javascript

Hello World

本文链接：https://blog.csdn.net/u013718730/article/details/90438436

版权

android 同时被 2 个专栏收录

288 篇文章 12 订阅

订阅专栏

javascript

106 篇文章 6 订阅

订阅专栏

预期结果
在这里插入图片描述
可以通过页面缩放，来缩小px对应的实际大小


<html>
    <head>
        <meta name="viewport" content="">
    </head>

    <script type="text/javascript" src="jquery-3.4.0.js"></script>

    <body>
        <div id="v1"></div>
        <div id="v2"></div>
    </body>

    <style>
        html, body {
            padding: 0px;
            margin: 0px;
        }

        #v1 {
            width: 100%;
            height: 50%;
        }

        #v2 {
            width: 100%;
            height: 1px;
            background: red;
        }
    </style>

    <script>
        $(() => {
            let metaNode = document.querySelector("meta[name='viewport']");
            //假设像素比为3，即理想视口下，1px代表3个物理像素，这时我们将页面缩小3倍，1px的大小就正好是1物理像素
            metaNode.content = "width=device-width, initial-scale=" + 1 / window.devicePixelRatio;
        });
    </script>
</html>

也可以通过媒体查询来对css样式进行缩放


<html>
    <head>
        <meta name="viewport" content="">
    </head>

    <script type="text/javascript" src="jquery-3.4.0.js"></script>

    <body>
        <div id="v1"></div>
        <div id="v2"></div>
    </body>

    <style>
        html, body {
            padding: 0px;
            margin: 0px;
        }

        #v1 {
            width: 100%;
            height: 50%;
        }

        #v2 {
            width: 100%;
            height: 1px;
            background: red;
        }

        @media only screen and (-webkit-device-pixel-ratio: 2) {
            #v2 {
                transform: scaleY(0.5);
            }
        }

        @media only screen and (-webkit-device-pixel-ratio: 3) {
            #v2 {
                transform: scaleY(0.33);
            }
        }
    </style>
</html>

但要注意，这两种情况下，页面总的css-pixel数量是不一样的，其它元素的大小设置方式也应当不一样

命运之手

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Html】【UI适配】移动端通过像素比适配1物理像素

<html> <head> <meta name="viewport" content=""> </head> <script type="text/javascript" src="jquery-3.4.0.js"></script> <body> ...
复制链接

扫一扫