在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”获取
