viewport 的基本原理以及使用

最新推荐文章于 2024-08-31 09:13:12 发布

我爱学习yq

最新推荐文章于 2024-08-31 09:13:12 发布

阅读量246

点赞数

文章标签：微信小程序小程序前端

本文链接：https://blog.csdn.net/m0_74801194/article/details/133120854

版权

本文介绍了移动端浏览器的viewport概念，以及CSS中的像素与设备像素的区别，重点讲解了width和initial-scale在viewport设置中的作用，推荐使用`width=device-width,initial-scale=1`以确保最佳兼容性。

摘要由CSDN通过智能技术生成

一.viewport的概要
移动端浏览器通常都在一个比屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是viewport，目的是正常展示没有做移动端适配的网页，可以让他们完整的展现给用户。我们有时用移动设备访问桌面版网页就会看到一个横向滚动条，这里可显示区域的宽度就是viewport的宽度。

二.css中的像素和设备像素的区别
在桌面网页开发时，css中的1px就是设备上的1px；然而css中的1px仅仅是一个抽象的值，不代表实际像素为多少；而在移动设备中，不同设备的像素密度是不一样的，css中的1px可能并不等于真实设备的一个像素值。用户缩放也会改变css中的1px代表多少设备像素。这个比例就是devicePixelRatio

物理像素/独立像素 = devicePixelRatio
我们可以在浏览器中进行缩放，在控制台中打印window.devicePixelRatio来查看devicePixelRatio的大小。其中的独立像素可以理解为css中的px。

三.viewport进阶
width和initial-scale
当设置了width和initial-scale时，浏览器会自动选择数值最大的进行适配。如设置：

1 <meta name="viewport" content="width=400, initial-scale=1">
浏览器会选择数值大的进行适配，如果当前窗口ideal viewport宽度为300，initial-scale值为1，取得是width为400的值；如果当前窗口的ideal viewport为480，则取480。

事实上，width=device-width和initial-scale=1都代表应用ideal viewport，但在ipad、iphone等移动设备和IE上，横竖屏不分，默认都取竖屏的宽度，兼容性最好的写法就是

1 <meta name="viewport" content="width=device-width, initial-scale=1">