viewpoint视口

最新推荐文章于 2022-03-06 22:54:06 发布

蓝图Lily

最新推荐文章于 2022-03-06 22:54:06 发布

阅读量1.4k

点赞数 1

分类专栏：前端技术文章标签： viewpoint

本文链接：https://blog.csdn.net/qq_39288987/article/details/102833844

版权

移动设备的viewport是指浏览器中显示网页的区域，通常大于可视区域，用于适应桌面网站。默认情况下，不同设备的viewport宽度不同，可能导致横向滚动。CSS像素与设备物理像素不一致，devicePixelRatio表示两者的比例。meta viewport标签用于移动端优化，通过设置属性控制viewport行为，如禁止用户缩放。meta viewport最初由苹果引入，被广泛采用。

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

viewpoint是什么

通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。
在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。
在这里插入图片描述

为什么要使用viewpoint

如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，1024px等这些，总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px，它跟代表实际屏幕物理像素的px不是一回事。
css中的1px并不等于设备的1px
css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。