彻底理解 Meta 标签中的 viewport 属性、含义及作用

彻底理解 Meta 标签中的 viewport 属性、含义及作用

viewport 属性是什么?有哪些作用?

浏览器的视口是一个在其中查看 Web 内容的窗口区域。这通常与渲染的页面大小不同,在这种情况下,浏览器为用户提供滚动条以滚动和访问所有内容。

简单理解:手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽。在移动设备和其他窄屏设备中,某些内容在比普通屏幕更宽的虚拟窗口或视口中渲染页面,然后缩小渲染的结果,以便可以一次看到所有内容。然后,用户可以通过平移和缩放以查看页面的不同区域。例如,如果移动屏幕的宽度为 640px,则页面可能会使用 980px 的虚拟视口渲染,然后页面将缩小以适应 640px 的空间。
这是因为并非所有页面都针对移动设备进行了优化,并且在以较小的视口宽度渲染时会被截断(或至少看起来很糟糕)。虚拟视口则是一种使非移动设备优化页面在窄屏设备上看起来更好的一个方法。

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

viewport 相关属性

  1. width
    控制视口的大小。这可以设置为特定像素数(如’width=600’),也可以设置为特殊值device-width,即 100vw100% 的视口宽度。最小值为 1。最大值为 10000。负值会被忽略。
  2. height
    控制视口的大小。这可以设置为特定像素数(如 height=600),也可以设置为特殊值 device-height,即 100vh100% 的视口高度。最小值为 1。最大值为 10000。负值会被忽略。
  3. initial-scale
    控制页面首次加载时显示的缩放倍数。最小值是 0.1。最大值是 10。默认值为 1。负值会被忽略。
  4. minimum-scale
    控制页面允许缩小的倍数。最小值是 0.1。最大值是 10。默认值为 1。负值会被忽略。
  5. maximum-scale
    控制页面允许放大的倍数。最小值是 0.1。最大值是 10。默认值为 1。负值会被忽略。
  6. user-scalable
    控制是否允许页面上的放大和缩小操作。有效值为 0、1、yes 或 no。默认值为 1,与 yes 相同。
  7. interactive-widget
    指定交互式 UI 组件(如虚拟键盘)对页面视口的影响。有效值:resizes-visualresizes-contentoverlays-content。默认值:resizes-visual
  • 注意:当widthinitial-scale同时出现
    <meta name="viewport" content="width=980, initial-scale=1.0">
    
    当二者同时出现且width的值不是device-width时,浏览器会取两个中值最大的那个。(例如 width=980,idea viewport的宽是1024,则浏览器取idea viewport的宽。相反则取width的值)。
    但是以上几种情况都会有极个别的小缺陷,就是某些移动设备的横屏、竖屏不分。于是就有了一种写法。
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
  • 10
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

www.www

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值