【移动端适配视口viewport】移动端meta属性设置的理想视口是什么

左手的ㄟ右手 2022-05-21 04:08 208阅读 0赞

1、看一下我的代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        
        
        
        
        <title>Title</title>
    </head>
    <body>
    </body>
    </html>
    <script>
        console.log(document.documentElement.getBoundingClientRect().width)
    </script>

2、首先看什么都不设置直接打印console.log(document.documentElement.getBoundingClientRect().width)这个是获取视口的宽度的。看到iphone下视口是980，这是浏览器厂商设置的。

![70][]

2、然后看理想视口呢？发现是375，这个是iphone的css屏幕宽度375，所以理想视口下，屏幕宽度就等于视口宽度，因此移动端适配的时候一般设置成理想视口模式ideal viewport

![70 1][]

3、设置成0.5缩放比例，发现视口变成了750

![70 2][]

4、设置成0.3333之后呢？视口大小变成了屏幕的3倍，也就是常说的2倍屏，3倍屏。

![70 3][]

其他的layout viewport  、 visual viewport，you can find in[移动前端开发之viewport的深入理解][viewport]

[70]: /images/20220521/96b054f416024b8e8783cd1772598b7b.png
[70 1]: /images/20220521/62c4dc5097d24866be8d8b5f5f081353.png
[70 2]: /images/20220521/005f3224069a497b9f54e899872dad0c.png
[70 3]: /images/20220521/ab0919b09ef2454682db388b91121dc5.png
[viewport]: https://www.cnblogs.com/2050/p/3877280.html