HTML-mobilemetaviewport

我们在做响应式布局的时候，一定要考虑适配手机屏幕。想必大部分同学都复制粘贴了下面的代码：，我们在移动端看到的显示效果非常好，整个页面不会卷曲。但是很多时候我们只是用而已，并没有理解这段代码是干什么的，为什么会影响手机页面的布局效果，它是如何工作的。今天我们将花一些时间来完全理解视口是什么。1.Units在讨论viewport之前，我们需要了解一些单位概念：devicepixels/physicalpixels（物理像素）指的是屏幕实际的物理像素。比如iPhone6Plus的像素分辨率是1920*1080，那么就代表它的纵向有1920个物理像素，横向有1080个物理像素。CSS像素（csspixel）/密度无关像素（densityindependentpixels-dip）CSS像素是web编程中的一个概念，比较抽象，实际并不存在。它是一种独立于设备而用于逻辑测量像素的单位，因此也称为密度无关像素。dip有时也缩写为dp。屏幕尺寸是指屏幕的对角线长度，以英寸（inch）为单位，1英寸=2.54厘米。常见的屏幕尺寸有5.0、5.5和6.0等。屏幕像素密度（pixelsperinch-ppi）是指屏幕上每英寸可以显示的物理像素数。比如iPhone6Plus是5.5英寸，它的分辨率（也就是物理像素）是1920*1080像素，那么它的ppi=√(1920^2+1080^2)/5.5≈401ppi。也就是说每英寸可以显示440个物理像素。设备像素比是指物理像素与密度无关像素的比率。window.devicePixelRatio=物理像素/倾角。可以通过window.devicePixelRatio获取，所有WebKit浏览器和Opera都支持。2.viewport视口是指用户在网页上的可见区域。视口的大小与设备有关。在手机等移动终端上，viewport的尺寸要比PC端小。一般不管是手机还是平板，默认视口大小都是980px。一开始只能在PC端查看网页，后来随着移动互联网的发展，越来越多的网页访问是通过移动端进行的，但是由于PC端的viewport比手机端大一方面，为了快速修复这个问题，手机浏览器默认只会将整个页面缩小到手机视口的大小。这样做的结果是，用户看到的是整个页面的缩小版，字体、图标和内容都非常小。如果要点击或查看，需要放大页面进行操作。页面放大后，会出现水平滚动，非常不利于用户体验。那么回到我们一开始写的meta标签：device-宽度是指此设备的理想视口宽度。iPhone6之前的device-width是320px，iPhone6是375px，iPhone6Plus是414px，这个device-width和CSSpixels一样（也叫density-independentpixelsdip）。也就是说，当网页中CSS像素的值等于device-width时，对应的是手机端全屏的宽度。Android手机的device-width有320px、360px、384px等，不同的设备有不同的device-width。initial-scale=1.0表示初始化时缩放大小为1，即不缩放。user-scalable=0表示禁用用户缩放。maximum-scale=1.0表示用户的最大缩放尺寸为1，其实禁止用户缩放后，这句话可以省略。设计师在为移动端设计页面时，经常会听到2ximage和3ximage这两个词。这是什么意思？我们以iPhone6为例：iPhone6的分辨率（即物理像素）为1334*750像素，其device-width为375px。如果我们把屏幕横向分成375份，1份在css中占1px，因为屏幕很大，当css中的width等于375px时，水平方向会占全屏，但实际上有750水平的物理像素，所以我们写CSS的时候，1px对应屏幕上的2个物理像素。如果我们不写width=device-width，默认视口宽度是980px。然后将iPhone6的屏幕横向分成980份，CSS中1px占1份，但真正的像素横向只有750，也就是说实际渲染出来的宽度是75/98像素（只是理论上的）。设计师在设计原型时以750px的宽度为基准。我们在写CSS的时候使用了一半的缩写，但是在渲染的时候，1px等于2px的物理像素，所以整张图片还是以750px的宽度显示。没有失真。如果设计师以375px的宽度为基准，那么我们在使用时直接在CSS中使用设计图中的像素宽度，那么渲染时1px等于2px的物理像素，相当于放大了图片2倍。会发生失真。3、总结添加后，移动端视口宽度会发生变化从默认的980px变为每个设备的设备宽度。CSS中的100%等于device-width。知道了这一点，我们就可以结合其他知识，为页面做出响应式布局。欢迎关注我的公众号