建设银行 钓鱼网站,韩国男女直接做的视频网站,wordpress安装在哪个文件夹,建设网站业务竞争大最近看了很多这方面的文章#xff0c;能搜到的基本看了个遍#xff0c;但感觉还是似懂非懂#xff0c;知道这个东西#xff0c;很难说出这是个什么东西#xff0c;先整理一些概念#xff0c;慢慢消化#xff0c;以后慢慢探索其中的原因。
1、PX(CSS pixels)
1.1 定义 …最近看了很多这方面的文章能搜到的基本看了个遍但感觉还是似懂非懂知道这个东西很难说出这是个什么东西先整理一些概念慢慢消化以后慢慢探索其中的原因。
1、PX(CSS pixels)
1.1 定义 虚拟像素可以理解为“直觉”像素CSS和JS使用的抽象单位浏览器内的一切长度都是以CSS像素为单位的CSS像素的单位是px。 1.2 注意
在CSS规范中长度单位可以分为两类绝对(absolute)单位以及相对(relative)单位。px是一个相对单位相对的是设备像素(device pixel)。
在同样一个设备上每1个CSS像素所代表的物理像素是可以变化的(即CSS像素的第一方面的相对性);
在不同的设备之间每1个CSS像素所代表的物理像素是可以变化的(即CSS像素的第二方面的相对性);
1.3 那么PX到底是什么
px实际是pixel像素的缩写根据 维基百科的解释它是图像显示的基本单元既不是一个确定的物理量也不是一个点或者小方块而是一个抽象概念。所以在谈论像素时一定要清楚它的上下文一定要清楚它的上下文一定要清楚它的上下文
不同的设备图像基本采样单元是不同的显示器上的物理像素等于显示器的点距而打印机的物理像素等于打印机的墨点。而衡量点距大小和打印机墨点大小的单位分别称为ppi和dpi
ppi每英寸多少像素数放到显示器上说的是每英寸多少物理像素及显示器设备的点距。
dpi每英寸多少点。
关于打印机的点距我们不去关心只要知道 当用于描述显示器设备时ppi与dpi是同一个概念 。
1.4 CSS像素的真正含义
由于不同的物理设备的物理像素的大小是不一样的所以css认为浏览器应该对css中的像素进行调节使得浏览器中 1css像素的大小在不同物理设备上看上去大小总是差不多 目的是为了保证阅读体验一致。为了达到这一点浏览器可以直接按照设备的物理像素大小进行换算而css规范中使用**参考像素**来进行换算。
1参考像素即为从一臂之遥看解析度为96DPI的设备输出即1英寸96点时1点即1/96英寸的视角。它并不是1/96英寸长度而是从一臂之遥的距离处看解析度为96DPI的设备输出一单位即1/96英寸时视线与水平线的夹角。通常认为常人臂长为28英寸所以它的视角是: (1/96)in / (28in * 2 * PI / 360deg) 0.0213度。
由于css像素是一个视角单位所以在真正实现时为了方便基本都是根据设备像素换算的。浏览器根据硬件设备能够直接获取css像素
1.5 举个栗子来理解css像素的相对性
作为Web开发者我们接触的更多的是用于控制元素样式的样式单位像素。这里的像素我们称之为CSS像素。
CSS像素有什么特别的地方我们可以借用quirksmode中的这个例子
假设我们用PC浏览器打开一个页面浏览器此时的宽度为800px页面上同时有一个400px宽的块级元素容器。很明显此时块状容器应该占页面的一半。
但如果我们把页面放大通过“Ctrl键”加上“号键”放大为200%也就是原来的两倍。此时块状容器则横向占满了整个浏览器。
吊诡的是此时我们既没有调整浏览器窗口大小也没有改变块状元素的css宽度但是它看上去却变大了一倍——这是因为我们把CSS像素放大为了原来的两倍。
CSS像素与屏幕像素11同样大小时 CSS像素(黑色边框)开始被拉伸此时1个CSS像素大于1个屏幕像素 也就是说默认情况下一个CSS像素应该是等于一个物理像素的宽度的但是浏览器的放大操作让一个CSS像素等于了两个设备像素宽度。在后面你会看到更复杂的情况在高PPI的设备上CSS像素甚至在默认状态下就相当于多个物理像素的尺寸。
从上面的例子可以看出CSS像素从来都只是一个相对值。
2、DP(device pixels)
2.1 定义 设备像素物理像素顾名思义显示屏是由一个个物理像素点组成的通过控制每个像素点的颜色使屏幕显示出不同的图像屏幕从工厂出来那天起它上面的物理像素点就固定不变了单位pt。 2.2 注意
pt在css单位中属于真正的绝对单位1pt 1/72(inch),inch及英寸而1英寸等于2.54厘米。
不同的设备其图像基本单位是不同的比如显示器的点距可以认为是显示器的物理像素。现在的液晶显示器的点距一般在0.25mm到0.29mm之间。而打印机的墨点也可以认为是打印机的物理像素300DPI就是0.085mm600DPI就是0.042mm。
注意我们通常所说的显示器分辨率其实是指桌面设定的分辨率而不是显示器的物理分辨率。只不过现在液晶显示器成为主流由于液晶的显示原理与CRT不同只有在桌面分辨率与物理分辨率一致的情况下显示效果最佳所以现在我们的桌面分辨率几乎总是与显示器的物理分辨率一致了。
2.3 小知识
小知识:屏幕普遍采用RGB色域(红、绿、蓝三个子像素构成),而印刷行业普遍使用CMYK色域(青、品红、黄和黑) 2.4 设备像素(DP)与CSS像素之间的关系
获得设备像素比dpr后便可得知设备像素与CSS像素之间的比例。当这个比率为1:1时使用1个设备像素显示1个CSS像素。当这个比率为2:1时使用4个设备像素显示1个CSS像素当这个比率为3:1时使用93*3个设备像素显示1个CSS像素。 所以有如下公式 DPR 设备像素/CSS像素 3、DIP(Device independent Pixel)
设备独立像素也称为逻辑像素简称dip。 根据上述设备像素与CSS像素之间的关系、及DPR的官方定义我们可以推断出 CSS像素 设备独立像素 逻辑像素 下面还是引用 http://www.cnblogs.com/2050/p/3877280.html 文中的内容说明
在移动端浏览器中以及某些桌面浏览器中window对象有一个devicePixelRatio属性它的官方的定义为设备物理像素和设备独立像素的比例也就是 devicePixelRatio 物理像素 / 独立像素。CSS像素就可以看做是设备的独立像素所以通过devicePixelRatio我们可以知道该设备上一个css像素代表多少个物理像素。例如在Retina屏的iphone上devicePixelRatio的值为2也就是说1个css像素相当于2个物理像素。但是要注意的是devicePixelRato在不同的浏览器中还存在些许的兼容性问题所以我们现在还并不能完全信赖这个东西具体的情况可以看下这篇文章。
为什么是“每四个一组”而且要让这四个一组来显示“原来屏幕的一个像素”这大概就是 Retina 显示技术的一种表现吧。而这“每四个一组”的“大像素”可以被称作“设备独立像素”device independent pixel 或者 density-independentpixel 它可以是系统中的一个点这个点代表一个可以由程序使用的虚拟像素然后由相关系统转换为物理像素。
“设备独立像素”也有人称为“CSS像素”一种形象的说法更倾向于表明与 CSS 中尺寸的对应。
设备独立像素与物理像素的对应关系可以这样看 类似的每四个一组的对应关系也许正是 Retina 显示技术所做的。
4、DPR(device pixels ratio)
4.1 定义 设备像素比dpr 描述的是未缩放状态下物理像素和CSS像素的初始比例关系计算方法如下图。 4.2 理解
设备像素比(dpr) 是指在移动开发中1个css像素占用多少设备像素如2代表1个css像素用2x2个设备像素来绘制。
设备像素比(dpr)公式为1px (dpr)^2 * 1dp可以理解为1px由多少个设备像素组成 5、PPI(pixels per inch)
5.1 定义 每英寸像素取值更确切的说法应该是像素密度也就是衡量单位物理面积内拥有像素值的情况。 5.2 ppi是如何计算出来的呢
顾名思义每英寸的像素点设备像素已知屏幕分辨率和主对角线的尺寸则ppi等于 以爱疯6为例 我们知道ppi越高每英寸像素点越多图像越清晰我们可以类比物体的密度密度越大单位体积的质量就越大ppi越高单位面积的像素越多。
5.3 ppi和dpr到底什么关系
毕竟这些参数是外国人先发明的他们会优先选择自己熟悉的计量单位作为显示设备的工厂标准参数因此ppi就用作显示设备的工业标准
告诉业界人士ppi达到多少是高清屏此时对应的dpr是多少而不直接告诉你我现在的显示设备dpr是多少毕竟人们直接听到像素分辨率会更加有反应。
设备像素比与ppi相关一般是ppi/160的整数倍 6、倍率与逻辑像素
6.1 基本关系 用iPhone 3gs和4s来举例。假设有个邮件列表界面我们不妨按照PC端网页设计的思维来想象。3gs上大概只能显示4-5行4s就能显示9-10行而且每行会变得特别宽。但两款手机其实是一样大的。如果照这种方式显示3gs上刚刚好的效果在4s上就会小到根本看不清字。 在现实中这两者效果却是一样的。这是因为Retina屏幕把2x2个像素当1个像素使用。比如原本44像素高的顶部导航栏在Retina屏上用了88个像素的高度来显示。导致界面元素都变成2倍大小反而和3gs效果一样了。画质却更清晰。
在以前iOS应用的资源图片中同一张图通常有两个尺寸。你会看到文件名有的带2x字样有的不带。其中不带2x的用在普通屏上带2x的用在Retina屏上。只要图片准备好iOS会自己判断用哪张Android道理也一样。
由此可以看出苹果以普通屏为基准给Retina屏定义了一个2倍的倍率iPhone 6plus除外它达到了3倍。实际像素除以倍率就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同它们的显示效果就是相同的。
6.2 Retina显示屏
这是一种显示技术可以将把更多的像素点压缩至一块屏幕里从而达到更高的分辨率并提高屏幕显示的细腻程度这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。
最先使用retina屏幕是iphone 4屏幕分辨率为960 * 640326ppi。
对比如下两幅图可以清晰地看出是否 Retina 屏的显示差异 图2 iPhone 3GS 图3 iPhone 4
两代iPhone 的物理尺寸屏幕宽高有多少英寸是一样的从上图可以看出iphone 4的显示效果要明显好于iphone 3GS虽然 iPhone 4 分辨率提高了但它不同于普通的电脑显示器那样为了显示更多的内容而是提升显示相同内容时的画面精细程度。这种提升方式是靠提升单位面积屏幕的像素数量即像素密度来提升分辨率这样做的主要目的是为了提高屏幕显示画面的精细程度。以第三代 MacBook Pro with Retina Display为例 工作时显卡渲染出的2880x1880个像素每四个一组输出原来屏幕的一个像素显示的大小区域内的图像。这样一来用户所看到的图标与文字的大小与原来的1440x900分辨率显示屏相同但精细度是原来的4倍。
注意在桌面显示器中我们调整了显示分辨率比如从 800 * 600 调整到 1024 * 768 时屏幕的文字图标会变小显示的内容更多了。但 Retina 显示方式不会产生这样的问题或者说 Retina 显示技术解决的是显示画面精细程度的问题而不是解决显示内容容量的问题。
7、分辨率、像素和屏幕尺寸
PPI 说的是像素密度而分辨率说的是块屏幕的像素尺寸譬如说 1334*750 就是 iPhone6~7的分辨率说 iPhone6~7的分辨率是 326 是错误的表述326 是它的像素密度单位是 PPI。
询问别人一粒像素有多大是一个非常鸡贼的问题小心面试遇到这样的题虽然我们说像素是构成屏幕的发光的点是物理的但是像素在脱离了屏幕尺寸之后是没有大小可言的你可以将 1920 * 1080 颗像素放到一台 40 寸的小米电视机里面也可以将同样多的像素全部塞到一台 5.5 寸的 iPhone7 Plus 手机里面去那么对于 40 寸的电视而言每个像素颗粒当然会大于 5.5 寸的手机的像素。 所以光看屏幕的分辨率对于设计师来说是不具备多少实际意义的通过分辨率计算得出的像素密度PPI才是设计师要关心的问题我们通过屏幕分辨率和屏幕尺寸就能计算出屏幕的像素密度的。
再次使用 iPhone6~7作为例子。我们知道该屏幕的横向物理尺寸为 2.3 英寸 且横向具有 750 颗像素根据下面的公式我们能够算出 iPhone6~7的屏幕是 326 PPI意为每寸存在 326 颗像素。
其实不论我们怎么除计算得出来的像素密度PPI都会是这个数宽存在像素除以宽物理长度高存在像素除以高物理长度得数都接近于 326。
8、Viewport
8.1 PPK的关于三个viewport的理论
ppk大神对于移动设备上的viewport有着非常多的研究第一篇第二篇第三篇有兴趣的同学可以去看一下本文中有很多数据和观点也是出自那里。ppk认为移动设备上有三个viewport。
首先移动设备上的浏览器认为自己必须能让所有的网站都正常显示即使是那些不是为移动设备设计的网站。但如果以浏览器的可视区域作为viewport的话因为移动设备的屏幕都不是很宽所以那些为桌面浏览器设计的网站放到移动设备上显示时必然会因为移动设备的viewport太窄而挤作一团甚至布局什么的都会乱掉。也许有人会问现在不是有很多手机分辨率都非常大吗比如768x1024或者1080x1920这样那这样的手机用来显示为桌面浏览器设计的网站是没问题的吧前面我们已经说了css中的1px并不是代表屏幕上的1px你分辨率越大css中1px代表的物理像素就越多devicePixelRatio的值也越大这很好理解因为你分辨率增大了但屏幕尺寸并没有变大多少必须让css中的1px代表更多的物理像素才能让1px的东西在屏幕上的大小与那些低分辨率的设备差不多不然就会因为太小而看不清。所以在1080x1920这样的设备上在默认情况下也许你只要把一个div的宽度设为300多px视devicePixelRatio的值而定就是满屏的宽度了。回到正题上来如果把移动设备上浏览器的可视区域设为viewport的话某些网站就会因为viewport太窄而显示错乱所以这些浏览器就决定默认情况下把viewport设为一个较宽的值比如980px这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。ppk把这个浏览器默认的viewport叫做 layout viewport。 这个layout viewport的宽度可以通过document.documentElement.clientWidth 来获取。
然而layout viewport 的宽度是大于浏览器可视区域的宽度的所以我们还需要一个viewport来代表 浏览器可视区域的大小ppk把这个viewport叫做 visual viewport 。visual viewport的宽度可以通过window.innerWidth 来获取但在Android 2, Oprea mini 和 UC 8中无法正确获取。 现在我们已经有两个viewport了layout viewport 和 visual viewport。但浏览器觉得还不够因为现在越来越多的网站都会为移动设备进行单独的设计所以必须还要有一个能完美适配移动设备的viewport。所谓的完美适配指的是首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容第二显示的文字的大小是合适比如一段14px大小的文字不会因为在一个高密度像素的屏幕里显示得太小而无法看清理想的情况是这段14px的文字无论是在何种密度屏幕何种分辨率下显示出来的大小都是差不多的。当然不只是文字其他元素像图片什么的也是这个道理。ppk把这个viewport叫做 ideal viewport也就是第三个viewport——移动设备的理想viewport。
ideal viewport并没有一个固定的尺寸不同的设备拥有有不同的ideal viewport。所有的iphone的ideal viewport宽度都是320px无论它的屏幕宽度是320还是640也就是说在iphone中css中的320px就代表iphone屏幕的宽度。 但是安卓设备就比较复杂了有320px的有360px的有384px的等等关于不同的设备ideal viewport的宽度都为多少可以到http://viewportsizes.com去查看一下里面收集了众多设备的理想宽度。
再总结一下ppk把移动设备上的viewport分为 layout viewport 、 visual viewport 和 ideal viewport 三类其中的ideal viewport是最适合移动设备的viewportideal viewport的宽度等于移动设备的屏幕宽度只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px)那么这个元素的宽度就是设备屏幕的宽度了也就是宽度为100%的效果。ideal viewport 的意义在于无论在何种分辨率的屏幕下那些针对ideal viewport而设计的网站不需要用户手动缩放也不需要出现横向滚动条都可以完美的呈现给用户。 8.2 利用meta标签对viewport进行控制
移动设备默认的viewport是layout viewport也就是那个比屏幕要宽的viewport但在进行移动设备网站的开发时我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢这就该轮到meta标签出场了。
我们在开发移动设备的网站时最常见的的一个动作就是把下面这个东西复制到我们的head标签中
meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalable0
该meta标签的作用是让当前viewport的宽度等于设备的宽度同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求但让viewport的宽度等于设备的宽度这个应该是大家都想要的效果如果你不这样的设定的话那就会使用那个比屏幕宽的默认viewport也就是说会出现横向滚动条。
这个name为viewport的meta标签到底有哪些东西呢又都有什么作用呢
meta viewport 标签首先是由苹果公司在其safari浏览器中引入的目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿引入对meta viewport的支持事实也证明这个东西还是非常有用的。
在苹果的规范中meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)如下 这些属性可以同时使用也可以单独使用或混合使用多个属性同时使用时用逗号隔开就行了。
此外在安卓中还支持 target-densitydpi 这个私有属性它表示目标设备的密度等级作用是决定css中的1px代表多少物理像素 特别说明的是当 target-densitydpidevice-dpi 时 css中的1px会等于物理像素中的1px。
因为这个属性只有安卓支持并且安卓已经决定要废弃striketarget-densitydpi/strike 这个属性了所以这个属性我们要避免进行使用 。
8.3 把当前的viewport宽度设置为 ideal viewport 的宽度
要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。因为meta viewport中的width能控制layout viewport的宽度所以我们只需要把width设为width-device这个特殊的值就行了。
meta nameviewport contentwidthdevice-width
下图是这句代码在各大移动端浏览器上的测试结果 可以看到通过widthdevice-width所有浏览器都能把当前的viewport宽度变成ideal viewport的宽度但要注意的是在iphone和ipad上无论是竖屏还是横屏宽度都是竖屏时ideal viewport的宽度。
这样的写法看起来谁都会做没吃过猪肉谁还没见过猪跑啊~确实我们在开发移动设备上的网页时不管你明不明白什么是viewport可能你只需要这么一句代码就够了。
可是你肯定不知道
meta nameviewport contentinitial-scale1
这句代码也能达到和前一句代码一样的效果也可以把当前的的viewport变为 ideal viewport。
呵呵傻眼了吧因为从理论上来讲这句代码的作用只是不对当前的页面进行缩放也就是页面本该是多大就是多大。那为什么会有 widthdevice-width 的效果呢
要想清楚这件事情首先你得弄明白这个缩放是相对于什么来缩放的因为这里的缩放值是1也就是没缩放但却达到了 ideal viewport 的效果所以那答案就只有一个了缩放是相对于 ideal viewport来进行缩放的当对ideal viewport进行100%的缩放也就是缩放值为1的时候不就得到了 ideal viewport 吗事实证明的确是这样的。下图是各大移动端的浏览器当设置了meta nameviewport contentinitial-scale1后是否能把当前的viewport 宽度变成 ideal viewport 的宽度的测试结果。 测试结果表明 initial-scale1 也能把当前的 viewport 宽度变成 ideal viewport 的宽度但这次轮到了windows phone 上的IE 无论是竖屏还是横屏都把宽度设为竖屏时 ideal viewport 的宽度。但这点小瑕疵已经无关紧要了。
但如果 width 和 initial-scale1 同时出现并且还出现了冲突呢比如
meta nameviewport contentwidth400, initial-scale1
width400 表示把当前 viewport 的宽度设为400pxinitial-scale1 则表示把当前 viewport 的宽度设为ideal viewport的宽度那么浏览器到底该服从哪个命令呢是书写顺序在后面的那个吗不是。当遇到这种情况时浏览器会取它们两个中较大的那个值。例如当width400ideal viewport 的宽度为320时取的是400当width400 ideal viewport的宽度为480时取的是ideal viewport的宽度。ps:在uc9浏览器中当initial-scale1时无论width属性的值为多少此时viewport的宽度永远都是ideal viewport的宽度
最后总结一下要把当前的viewport宽度设为ideal viewport的宽度既可以设置 widthdevice-width也可以设置 initial-scale1但这两者各有一个小缺陷就是iphone、ipad以及IE 会横竖屏不分通通以竖屏的ideal viewport宽度为准。所以最完美的写法应该是两者都写上去这样就 initial-scale1 解决了 iphone、ipad的毛病widthdevice-width则解决了IE的毛病
meta nameviewport contentwidthdevice-width, initial-scale1
8.4 关于meta viewport的更多知识
8.4.1 关于缩放以及initial-scale的默认值
首先我们先来讨论一下缩放的问题前面已经提到过缩放是相对于 ideal viewport 缩放的缩放值越大当前viewport的宽度就会越小反之亦然。例如在iphone中ideal viewport 的宽度是320px如果我们设置 initial-scale2 此时 viewport 的宽度会变为只有160px了这也好理解放大了一倍嘛就是原来1px的东西变成2px了但是1px变为2px并不是把原来的320px变为640px了而是在实际宽度不变的情况下1px变得跟原来的2px的长度一样了所以放大2倍后原来需要320px才能填满的宽度现在只需要160px就做到了。因此我们可以得出一个公式 visual viewport宽度 ideal viewport宽度 / 当前缩放值 当前缩放值 ideal viewport宽度 / visual viewport宽度 ps: visual viewport 的宽度指的是浏览器可视区域的宽度。
大多数浏览器都符合这个理论但是安卓上的原生浏览器以及IE有些问题。安卓自带的webkit浏览器只有在 initial-scale 1 以及没有设置width属性时才是表现正常的也就相当于这理论在它身上基本没用而IE则根本不甩initial-scale这个属性无论你给他设置什么initial-scale表现出来的效果永远是1。
好了现在再来说下 initial-scale 的默认值问题就是不写这个属性的时候它的默认值会是多少呢很显然不会是1因为当 initial-scale 1 时当前的 layout viewport 宽度会被设为 ideal viewport 的宽度但前面说了各浏览器默认的 layout viewport 宽度一般都是980啊1024啊800啊等等这些个值没有一开始就是 ideal viewport 的宽度的所以 initial-scale 的默认值肯定不是1。安卓设备上的 initial-scale 默认值好像没有方法能够得到或者就是干脆它就没有默认值一定要你显示的写出来这个东西才会起作用我们不管它了这里我们重点说一下iphone和ipad上的 initial-scale 默认值。
根据测试我们可以在iphone和ipad上得到一个结论就是无论你给 layout viewpor 设置的宽度是多少而又没有指定初始的缩放值的话那么iphone和ipad会自动计算 initial-scale 这个值以保证当前 layout viewport 的宽度在缩放后就是浏览器可视区域的宽度也就是说不会出现横向滚动条。比如说在iphone上我们不设置任何的 viewport meta 标签此时 layout viewport 的宽度为980px但我们可以看到浏览器并没有出现横向滚动条浏览器默认的把页面缩小了。根据上面的公式当前缩放值 ideal viewport宽度 / visual viewport宽度我们可以得出 当前缩放值 320 / 980 也就是当前的 initial-scale 默认值应该是 0.33这样子。当你指定了 initial-scale 的值后这个默认值就不起作用了。
总之记住这个结论就行了在iphone和ipad上无论你给viewport设的宽的是多少如果没有指定默认的缩放值则iphone和ipad会自动计算这个缩放值以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的。 8.4.2 动态改变meta viewport标签
第一种方法
可以使用 document.write 来动态输出 meta viewport 标签例如
document.write(meta nameviewport contentwidthdevice-width,initial-scale1)
第二种方法
通过 setAttribute 来改变
meta idtestViewport nameviewport contentwidth 380
script
var mvp document.getElementById(testViewport);
mvp.setAttribute(content,width480);
/script
安卓2.3自带浏览器上的一个 bug
meta nameviewport contentwidthdevice-widthscript typetext/javascript
alert(document.documentElement.clientWidth); //弹出600正常情况应该弹出320
/scriptmeta nameviewport contentwidth600script typetext/javascript
alert(document.documentElement.clientWidth); //弹出320正常情况应该弹出600
/script
测试的手机 ideal viewport 宽度为320px第一次弹出的值是600,但这个值应该是第行meta标签的结果啊然后第二次弹出的值是320这才是第一行meta标签所达到的效果啊所以在安卓2.3(或许是所有2.x版本中)的自带浏览器中对 meta viewport 标签进行覆盖或更改会出现让人非常迷糊的结果。
最后我们来看一个栗子来加深上面概念的印象
一只笔的像素如下
这只笔在屏幕c,d,e下的显示效果如下
看到同一张图片在各屏幕显示大小不一。 我们希望不同屏幕显示图片的大小要一致。 我们要计算图片缩放比例。 计算公式 (图片逻辑像素大小px1) / (图片缩放后实际像素大小px2) (设备像素dp) / (设备独立像素dips) px2 px1 * (dp / dips) px2 px1 * dpr 此时这只笔在屏幕c,d,e下的显示效果如下 通过上面的我们可以看到不同的 DPR (设备像素比)要想显示大小一样必须准备三张不同分辨率的图片那么我想一张图片就在三种不同的屏幕下显示一样的大小能做到吗当然能做到这就需要缩放了要自己计算缩放多麻烦那有没有一种简单的方式呢当然有那就是你在熟悉不过的px,你会发现设置图片宽度为50px以后在各个移动终端的大小看起来都一样这是什么原因呢。 按照 CSS 规范的定义CSS 中的 px 是一个相对长度它相对的是 viewing device 的分辨率。这个viewing device通常就是电脑显示器。典型的电脑显示器的分辨率是96DPI也就是1像素为1/96英寸实际上假设我们的显示器分辨率都与物理分辨率一致而液晶点距其实是0.25mm到0.29mm之间所以不太可能是正好1/96英寸而只是接近。
一般来说px 就是对应设备的物理像素然而如果输出设备的解析度与电脑显示器大不相同输出效果就会有问题。例如打印机输出到纸张上其解析度比电脑屏幕要高许多如果不缩放直接使用设备的物理像素那电脑上的照片由 600DPI 的打印机打出来就比用显示器看小了约6倍。
所以 CSS 规定在这种情况下浏览器应该对像素值进行缩放调节以保持阅读体验的大体一致。也就是要保持一定像素的长度在不同设备输出上看上去的大小总是差不多。
怎样确保这一点呢直接按照设备物理像素的大小进行换算当然是一个方式但是CSS考虑得更多它建议转换应按照“参考像素”reference pixel来进行。
眼睛看到的大小取决于可视角度。而可视角度取决于物体的实际大小以及物体与眼睛的距离。10米远处一个1米见方的东西与1米远处的10厘米见方的东西看上去的大小差不多是一样的所谓一叶障目不见泰山讲的就是这个常识。
因此CSS规范使用视角来定义“参考像素”1参考像素即为从一臂之遥看解析度为96DPI的设备输出即1英寸96点时1点即1/96英寸的视角。
请注意这个差别——CSS规范定义的参考像素并不是1/96英寸而是1/96英寸在一臂之遥的看起来的视角。通常认为常人臂长为28英寸所以其视角可以计算出来是0.0213度。即(1/96)in / (28in * 2 * PI / 360deg)
我们在使用不同设备输出时眼睛与设备输出的典型距离是不同的。比如电脑显示器通常是一臂之距而看书和纸张时对应于打印机的设备输出则通常会更近一些。看电视时则会更远比如一般建议是电视机屏幕对角线的2.5到3倍长——如果你是个42彩电那就差不多是3米远。看电影的话……我就不知道多远了您自己量吧。
因此1参考像素 对于电脑显示器是0.26mm即1/96英寸 对于激光打印机是0.20mm假设阅读距离通常为55cm即21英寸
而换算时对于300DPI的打印机即每个点是1/300英寸1px通常会四舍五入到3dots也就是0.25mm左右而对于600DPI的打印机则可能四舍五入到5dots也就是0.21mm。 上图中左边的屏幕可以认为是电脑屏幕的典型视觉距离是71厘米即28英寸其1px对应了0.28mm 而右边的屏幕可以认为是你的42寸高清电视的典型视觉距离是3.5米即120英寸其1px对应1.3mm。42寸的1080p电视分辨率是1920*1080则其物理像素只有0.5mm左右可见确实是高清哦。
综上px 是一个相对单位而且在特定设备上总是一个近似值原则是尽量接近参考像素。
然而如果你把绝对单位理解为对输出效果的绝对掌控事情却大相径庭。就网页输出的最主要对象——电脑屏幕来说px 可被视为一个基准单位——与桌面分辨率一致如果是液晶屏则几乎总是与液晶屏物理分辨率一致——也就是说网页设计者设定的1px就是“最终看到这个网页的用户的显示器上的1个点距”反倒是那些绝对单位其实一点也不绝对。
转载https://blog.csdn.net/qq_33834489/article/details/79247119
参考文章
深入理解移动端像素知识与Viewport知识移动端H5页面的设计稿尺寸上移动端H5页面的设计稿尺寸下你真的了解像素吗移动前端开发之viewport的深入理解设备像素设备独立像素CSS像素移动端开发系列——像素与viewport移动端高清、多屏适配方案 像素px到底是个什么单位CSS 长度单位彻底理解 UI 及 Web 的尺寸单位基本概念针对iPhone的pt、Android的dp、HTML的css像素与dpr、设计尺寸和物理像素的浅分析
原文地址https://github.com/jawil/blog/issues/21
