Viewport meta标签

背景
移动端浏览器在一个通常比屏幕更宽的虚拟“窗口”(Viewport)中渲染页面,从而无需将所有页面都压缩进小屏幕里(那样会把很多没有针对移动端进行优化的站点打乱)。用户可以通过平移和缩放来浏览页面的不同区域。

Mobile Safari 引入了”viewport元标签“来让web开发者控制视口的尺寸及比例。如今许多其他移动端浏览器已经支持这一标签,虽然它不是任何web标准的一部分。

以一代 iPhone 下的 Safari 来说就是:
在 iPhone 的 320px 物理屏幕上——视觉窗口(visual viewport),创建出了一个 980px的虚拟窗口——布局窗口(layout viewport),在视觉窗口(visual viewport)中我们可以拖动横向竖向滑动条或者放大缩小网页,来达到最佳的浏览效果(类似桌面浏览器);而布局窗口(layout viewport)用来配合 CSS 渲染布局,例如当我们设置一个容器的宽度为 100% 时,这个容器的实际值为 980px 而不是 320px。如此一来大部分网页就能以缩放的形式正常的显示在手机屏幕上了。

基础属性
viewport 全部属性&值如下:

  • width: viewport宽度
  • height: viewport高度
  • initial-scale: 初始缩放比例
  • maximum-scale: 最大缩放比例
  • minimum-scale: 最小缩放比例
  • user-scalable: 是否允许用户缩放

最基本的一个设置大概是这样的

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

配合css media query
关于viewport主要是在做一个页面的响应式时发现当我设置为:

@media only screen and (max-width: 769px){}

模拟iphone并不会渲染这部分的样式,最后发现页面没有设置viewpoint的宽度,所以iphone的默认宽度是在980,所以留个记录~