在PC端,视口是指浏览器的可见区域,它的宽度与浏览器窗口的宽度一致。在CSS标准文档中,视口也称为初始包含块,它是所有CSS百分比宽度计算的根,为CSS布局限定了一个最大宽度。移动端就比较复杂了,它涉及三个视口:布局视口(LayoutViewport)、视觉视口(VisualViewport)和理想视口(IdealViewport)。本文主要讨论移动端中的viewport。1.基本概念1.1两种像素像素是计算机屏幕上显示特定颜色的最小区域。屏幕上的像素越多,您在同一区域可以看到的东西就越多。也就是说,在设备尺寸相同的情况下,像素越密,画面越精细。那么当我们设置属性width:250px时会发生什么?到CSS中的元素?这个元素的宽度是多少像素?实际上,这里已经涉及到两种不同的像素:物理像素和CSS像素。物理像素(devicepixels,设备像素)是指设备屏幕的物理像素,任何设备的物理像素数量都是固定的。CSS像素(CSSpixels)是CSS和JS中使用的一种抽象。它与物理像素的比例取决于屏幕的特性(是否高密度)和用户进行的缩放,由浏览器自身进行转换。在苹果的视网膜屏(Retina)中,每组4个像素将图像渲染在普通屏幕一个像素的显示区域内,从而达到更细致的显示效果。此时,250px元素的宽度为500个物理像素。如果用户放大,一个CSS像素也会跨越更多的物理像素。1.2三种视口手机浏览器的宽度通常为240px~640px,而大多数为PC设计的网站宽度至少为800px。如果仍然使用浏览器窗口作为视口,网站内容在手机上看起来会很不一样。狭窄的。因此引入了布局视口、视觉视口和理想视口三个概念,让移动端的视口不再与浏览器的宽度相关联。布局视口(layoutviewport)一般移动设备的浏览器都会默认设置一个viewportmeta标签来定义一个虚拟的布局视口(layoutviewport),用于解决手机上早期页面的显示问题。iOS和Android基本都是把视口分辨率设置为980px,所以PC上的网页在手机上基本可以渲染,但是元素看起来很小,网页默认默认可以手动缩放。布局视口的宽高可以通过document.documentElement.clientWidth/Height获取。如您所见,默认布局视口宽度为980px。如果要显式设置布局视口,可以使用HTML中的meta标签:布局视口使视口完全独立于手机浏览器屏幕宽度。CSS布局将基于它计算并受其约束。视觉视口(visualviewport)视觉视口是用户当前看到的区域。用户可以在不影响布局视口的情况下,通过缩放操作可视视口。视觉视口和缩放比例之间的关系是:当前缩放值=理想视口宽度/视觉视口宽度所以,当用户放大时,视觉视口会变小,CSS像素会跨越更多的物理像素。Idealviewport布局视口的默认宽度并不是一个理想的宽度,所以苹果等浏览器厂商引入了理想视口的概念,也就是设备最理想的布局视口大小。在理想视口中显示的网站具有最佳宽度,用户无需缩放。理想视口的值实际上就是屏幕分辨率的值,它对应的像素称为设备独立像素(dip)。dip与设备的物理像素无关,dip在任何像素密度的设备屏幕上占据相同的空间。如果用户没有缩放,那么一个CSS像素等于一次倾斜。使用下面的方法可以让布局视口和理想视口一样宽:其实这是响应式布局的基础。2.视口设置我们可以使用视口元标签(viewportmetatag)来设置布局视口。下面是对每个属性的详细说明:属性名值说明width正整数或device-width以像素为单位定义视口的宽度height正整数或device-height以像素为单位定义视口的高度,一般不用initial-scale[0.0-10.0]定义初始缩放值minimum-scale[0.0-10.0]定义zoom最大比例,必须小于或等于设置的最大比例maximum-scale[0.0-10.0]定义最小比例,必须大于或等于设置的最小比例user-scalableyes/no定义是否允许用户手动缩放页面,默认值yes有几点值得注意:viewport标签只对移动浏览器有效,对PC浏览器无效。当缩放比例为100%时,dipwidth=CSSpixelwidth=idealviewportwidth=layoutviewport单独设置initial-scale或width会有兼容性问题,所以将layoutviewport设置为idealviewport最好的方式就是设置这些两个属性同时存在即使设置了user-scalable=no,在AndroidChrome浏览器中也不起作用可以强制启用手动缩放。3.双像、双像、三像MacBookProRetina显示屏硬件像素为2880px1800px。当屏幕分辨率设置为1920px1200px时,理想视口宽度值为1920px,则dip的宽度值为1920px。它与理想视口宽度的比率为1.5(2880/1920)。这个比例称为设备像素比:逻辑像素宽度*设备像素比例=物理像素宽度。设备像素比可以通过window.devicePixelRatio获取,也可以通过CSSdevice-pixel-ratio获取。以下是常见的设备像素比:普通密度桌面显示器:devicePixelRatio=1高密度桌面显示器(MacRetina):devicePixelRatio=2主流手机显示器:devicePixelRatio=2或3对于100px*100px的图像,通过CSS设置其宽度和高度:{宽度:100px;height:100px;}在正常显示的电脑上打开是正常的,但是如果在手机或者Retina屏上打开,是按照逻辑分辨率渲染的,他们的devicePixelRatio=2,那么就相当于用4个物理像素来描述1个电子像素。这相当于用2倍放大镜看图片,图片会变得模糊。这时候就需要使用@2x甚至@3x的图像来避免图像失真。最后,本文只涉及移动端开发中viewport的基本概念。详情请参考PPK大作《移动Web手册》PS:电子版请关注公众号《代码写完了》,发送“ppk”获取