移动端viewport属性说明笔记

2021-01-13 19:23:21

说说移动端浏览器中的视口

视口(Viewport)是移动Web开发中一个非常重要的概念,最早是由苹果公司在推出iPhone手机时发明的,其目的是为了让iPhone的小屏幕尽可能完整显示整个网页。通过设置视口,不管网页原始的分辨率尺寸有多大,都能将其缩小显示在手机浏览器上,这样保证网页在手机上看起来更像在桌面浏览器中的样子。

基础概念

像素是计算机屏幕中显示特定颜色的最小区域。屏幕中的像素越多,同一范围内能看到的内容就越多。或者说,当设备尺寸相同时,像素越密集,画面就越精细。

物理像素(设备像素,device pixels)

指的是设备屏幕的物理像素,任何设备的物理像素数量都是固定的。

CSS 像素(CSS pixels)

是 CSS 和 JS 中使用的一个抽象概念。它和物理像素之间的比例取决于屏幕的特性(是否为高密度)以及用户进行的缩放,由浏览器自行换算。

布局视口(layout viewport)

指网页的宽度,一般移动端浏览器都默认设置了布局视口的宽度。根据设备的不同,布局视口的默认宽度有可能是768px、980px或1024px等,这个宽度并不适合在手机屏幕中展示。移动端浏览器之所以采用这样的默认设置,是为了解决早期的PC端页面在手机上显示的问题。iOS, Android 基本都将这个视口分辨率设置为 980px,所以 PC 上的网页基本能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页。

  • 获取方式
    document.documentElement.clientWidth / Height
  • 显式设置布局视口

<meta name="viewport" content="width=1000">

布局视口使视口与移动端浏览器屏幕宽度完全独立开。CSS 布局将会根据它来进行计算,并被它约束。

视觉视口(visual viewport)

视觉视口是指用户正在看到的网站的区域,这个区域的宽度等同于移动设备的浏览器窗口的宽度,用户可以通过缩放操作视觉视口,同时不会影响布局视口。

  • 缩放比例关系:当前缩放值 = 理想视口宽度 / 视觉视口宽度

用户放大时,视觉视口将会变小,CSS 像素将跨越更多的物理像素。

理想视口(ideal viewport)

布局视口的默认宽度并不是一个理想的宽度,于是 Apple 和其他浏览器厂商引入了理想视口的概念,它对设备而言是最理想的布局视口尺寸。显示在理想视口中的网站具有最理想的宽度,用户无需进行缩放。

理想视口的值其实就是屏幕分辨率的值,它对应的像素叫做设备逻辑像素(device independent pixel, dip)。dip 和设备的物理像素无关,一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。如果用户没有进行缩放,那么一个 CSS 像素就等于一个 dip。

布局视口与理想视口的宽度一致:

<meta name="viewport" content="width=device-width">

常用的针对移动网页优化过的页面的 viewport meta 标签

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

属性说明

属性名 取值 描述
width 正整数或device-width 定义视口的宽度,单位为像素
height 正整数或device-height 定义视口的高度,单位为像素,一般不用
initial-scale [0.0-10.0] 定义初始缩放值,即当页面第一次 load 的时候缩放比例
minimum-scale [0.0-10.0] 允许用户缩放到的最大比例,它必须小于或等于maximum-scale设置
maximum-scale [0.0-10.0] 允许用户缩放到的最小比例,它必须大于或等于minimum-scale设置
user-scalable yes / no 定义是否允许用户手动缩放页面,默认值 yes

注意

  • viewport 标签仅对移动端浏览器有效,对 PC 端浏览器无效
  • 缩放比例为 100% 时,dip 宽度 = CSS 像素宽度 = 理想视口的宽度 = 布局视口的宽度
  • 单独设置 initial-scale 或 width 都会有兼容性问题,所以设置布局视口为理想视口的最佳方法是同时设置这两个属性
  • 即使设置 user-scalable = no,也可以在 Android Chrome 浏览器中强制启用手动缩放
  • iOS的Safari浏览器,从10.0版本开始将不在支持user-scalable=no,所以即使设置了user-scalable=no,用户依然可以对页面进行手势操作来缩放
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-ND 3.0 许可协议。可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。

扫描下方二维码阅读当前文章

浏览器、微信扫码
微信小程序

评 论:

好文推荐
极客之路公众号
三百人技术交流群
探讨前端、小程序正逆向、爬虫...
学习交流&商务合作
微信情报 更多 >
    每天进步一点点~