name="viewport" width="device-width" 到底都是啥

[TOC]
参考文件:CSS Pixel与绝对像素
参考文件:移动端适配- dpr浅析
参考文件:pixel is not a pixel is not a pixel
参考文件:此像素非彼像素
参考文件:关于HTML5中meta name=”viewport” 的用法
拓展链接:像素是什么

移动端页面渲染过程:

打开一个页面,移动端浏览器会自动寻找,如果指定了视窗口的width,就会把页面放到指定width的viewport里面。如果没有指定,则默认值有的是980,具体根据浏览器来定的。
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

上述代码可以解决这个问题。
width:控制 layout viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。

viewport是什么?

一般来说,在移动浏览器上页面渲染是在一个叫viewport的页面绘制区域内。
手机浏览器把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。

  • layout viewport:是网页的所有内容,他可以全部或者部分展示给用户。
  • visual viewport:是当前显示给用户内容的窗口,你可以拖动或者放大缩小网页。

viewport和屏幕的真实尺寸并不是对应的,如在Safari Mobile中viewport默认宽度(320px)是屏幕真实尺寸(640px)的一半,这里不管是用window.innerHeight还是window.screen.width拿到的都是320px。

当然我们可以通过meta设置改变viewport的比例,如initial-scale=.5就可以让viewport和屏幕一致的尺寸,这个比例在不同的手机上并不一定是2倍关系,特别是Android手机。而且改变viewport比例后可能会导致后续制作中出现一系列问题。另外Android系统中可以在viewport设置target-densitydpi=device-dpi让viewport的尺寸和屏幕真实尺寸保持一致,但iOS不起作用,所以这个方法不具有普遍性。不要纠结一定要拿到屏幕真实尺寸,就把viewport的尺寸当成屏幕的尺寸进行页面设计和制作肯定是没有问题的。

例如:当你打开一个960px设计的网页时,手机会根据css中的百分比进行缩放。比如总长960的页面,导航条是20%。(实际解析出来就是192px)但是你不可能每个属性都是百分比吧,比如文字大小。那么我用320px屏幕打开,导航条就成了64px了,但是我的字体大小是12px啊,完了,本来能显示很多汉字的(192/12)现在只能显示64/12个汉字了。

Apple找到了一个办法:在移动版(iOS)的Safari中定义了viewport meta标签①,它的作用就是创建一个虚拟的窗口(viewport),而且这个虚拟窗口的分辨率接近于桌面显示器,Apple将其定位为980px②。

①除此之外不同移动浏览器厂商也有不同的解决方案,例如UCweb就是使用中间件技术。
②不同的浏览器厂商对于layout viewport的大小定义不同

Safari iPhone: 980px
Opera: 850px
Android WebKit: 800px
IE: 974px

涉及显示的几个概念

物理像素与CSS像素

设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点。
CSS像素是Web编程的概念,独立于设备的用于逻辑上衡量像素的单位,也就是说我们在做网页时用到的CSS像素单位,是抽象的,而不是实际存在的。

分辨率(物理像素)

screen.height //screen.width返回显示设备的信息。
除非调整显示设备的分辨率,否则看作是常量。

(显示)分辨率就是屏幕上显示的像素个数,分辨率160×128的意思是水平像素数为160个,垂直像素数128个。

分辨率越高,像素的数目越多,感应到的图像越精密。

而在屏幕尺寸一样的情况下,分辨率越高,显示效果就越精细和细腻。

以分辨率为1024×768的屏幕来说,即每一条水平线上包含有1024个像素点,共有768条线,即扫描列数为1024列,行数为768行。

分辨率不仅与显示尺寸有关,还受显像管点距、视频带宽等因素的影响。其中,它和刷新频率的关系比较密切,严格地说,只有当刷新频率为“无闪烁刷新频率”,显示器能达到最高多少分辨率,才能称这个显示器的最高分辨率为多少。

PPI

pixels per inch所表示的是每英寸所拥有的像素(pixel)数目。

手机屏幕的PPI当达到一定数值时,人眼就分辨不出颗粒感了。

这个数值是多少?按照2010年前苹果公司CEO史蒂夫·乔布斯(Steve Jobs)在iPhone 4发布会上对视网膜技术的介绍:“当你所拿的东西距离你10-12英寸(约25-30厘米)时,它的分辨率只要达到300ppi这个‘神奇数字’(每英寸300个像素点)以上,你的视网膜就无法分辨出像素点了。”(即所谓的retina视网膜屏幕。之所以叫做视网膜屏幕,是因为屏幕的PPI(屏幕像素密度)太高,人的视网膜无法分辨出屏幕上的像素点。)

那么,是不是屏幕PPI超过这个数值就没有意义了?
==>除PPI之外,还看它的饱和度,渲染度。

DPR设备像素比

DPR(devicePixelRatio)是默认缩放为100%的情况下,设备像素和CSS像素的比值:

DPR = 设备像素 / CSS像素(某一方向上)
普通密度桌面显示屏的devicePixelRatio=1
高密度桌面显示屏(Mac Retina)的devicePixelRatio=2
主流手机显示屏的devicePixelRatio=2或3

因为大部分桌面显示器的devicePixelRatio为1,所以在PC端我们感受不出来CSS Pixel 与 物理像素的差别。
举个栗子来说,一张100x100的图片,通过CSS设置它width:100px; height:100px; 。在电脑上打开,没有什么问题,但是在手机上打开,屏幕按照逻辑分辨率来渲染,假设手机的devicePixelRatio=3,那么就相当于拿3个物理像素来描绘1个电子像素。这等于拿一个三倍的放大镜去看你的图片,你的图片可能因此变得模糊,因为细节不够。所以一般明智的做法是把图片换成300x300的,CSS宽高不变,这样在手机上展示时,CSS宽高换算成物理像素是300x300,你的图片也是300x300,就不会变糊了。

常用移动设备的PPI与DPR

IOS设备PPIDPR
iPhone43262
iPhone4s3262
iPhone53262
iPhone5s3262
iPhone63262
iPhone6s3262
iPhone6 PLUS4413
iPhone6s PLUS4413
iPad --2
iPad --3
android尺寸dpr
:—-:—–:
低清设备1
-1.5
-1.75
-2
mx2800*12802.5
小米note720*12802.75
--3
三星note4-4
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页