第一期《meta viewport原理》

最新推荐文章于 2024-08-13 22:00:00 发布

华仔而立

最新推荐文章于 2024-08-13 22:00:00 发布

阅读量6.1k

点赞数

分类专栏： web-css 文章标签： viewport css 布局

本文链接：https://blog.csdn.net/qq_30628821/article/details/79009074

版权

本文介绍了移动浏览器的viewport概念，包括layout viewport、visual viewport和ideal viewport，解释了它们的区别和作用。此外，讨论了css中的1px与设备物理像素的关系，并提到了devicePixelRatio在不同设备上的应用。通过理解viewport，有助于优化移动设备上的网页布局和响应式设计。

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

什么是Viewport

手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，

通常这个虚拟的“窗口”（viewport）比屏幕宽，

这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），

用户可以通过平移和缩放来看网页的不同部分。

移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。

例子

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

content内容

字段名称	类型	描述
width	number \| device-width	控制 viewport 的宽度
height	number \| device-width	控制 viewport 的宽度
initial-scale	device-width	初始缩放比例，也即是当页面第一次 load 的时候缩放比例
maximum-scale