设备像素也叫物理像素。

设备像素指的是显示器上的真实像素,每个像素的大小是屏幕固有的属性,屏幕出厂以后就不会改变了。
设备分辨率描述的就是这个显示器的宽和高分别是多少个设备像素。
设备像素和设备分辨率交给操作系统来管理,浏览器不知道、也不需要知道设备分辨率的大小,浏览器只需要知道逻辑分辨率就可以了。

早期的移动设备,只有物理像素,没有独立像素,在不缩放的前提下,CSS 中的 1px 就代表着 1 个物理像素。比如 iphone3 的物理像素是 320 * 480,那么 width: 320px; 的元素将会占满 iphone3 的屏幕宽度。

设备独立像素

从 iphone4 开始,苹果公司便推出了所谓的 Retina 屏,物理像素变成 640 * 960,但是屏幕尺寸没有变化,也就是说单位面积上的物理像素的数量增加了,或者说屏幕密度增加了。如果还按照原来那样,1px CSS 像素由 1 个物理像素来渲染, 那么 width: 320px; 的元素只会占据半个屏幕的宽度。原来在 iphone3 上能够占满屏的网页,在 iphone4 上只会占一半的屏幕,同时 font-size: 20px; 的字体在 iphone4 上的尺寸也会缩小。
为了让同一个网页在 iphone4 和 iphone3 上的有相同的显示效果,引入了独立像素的概念。iphone4 的独立像素为 320 * 480,是 iphone4 的物理像素的一半,和 iphone3 的物理像素一样。也就是说,iphone4 上的 1 个独立像素 == 2 个物理像素。在 iphone4 上,在不缩放的前提下,CSS 中的 1px 便由 1 个独立像素来渲染,相当于 2 个物理像素。这样,width: 320px; 的元素由 320 个独立像素来渲染,也就是由 640 个物理像素来渲染,正好占满 iphopn4 的屏幕宽度。font-size: 20px; 的字体在 iphone3 和 iphone4 上的尺寸也相同,只不过在 iphone4 上的字体更清楚。

我们已经知道,iphone4 上,1 个独立像素 == 2 个物理像素,但是不是所有的设备上都这样。下图展示了不同型号的 iphone 的物理像素和独立像素 (设备分辨率代表物理像素,逻辑分辨率代表独立像素)。

 
 
 
 
 

css像素

在CSS中使用的px都是指css像素,比如width: 128px。css像素的大小是很容易变化的。当我们缩放页面的时候,元素的css像素数量不会改变,改变的只是每个css像素的大小。也就是说width: 128px的元素在缩放200%以后,宽度依然是128个css像素,只不过每个css像素的宽度和高度变为原来的两倍。如果原本元素宽度为128个设备独立像素,那么缩放200%以后元素宽度为256个设备独立像素(css像素宽度始终是128)

在缩放比例为100%的情况下,一个css像素大小等于一个设备独立像素。

为了描述不同型号的手机物理像素和独立像素之间的关系,引入了一个新的概念:设备像素比 devicePixelRatio。在 js 中通过 window.devicePixelRatio 查看。

devicePixelRatio = 物理像素 / 独立像素

iphone3: devicePixelRatio = 320 / 320 = 1
iphone4: devicePixelRatio = 640 / 320 = 2
iphone6Plus: devicePixelRatio = 1242 / 414 = 3

在 media 查询中,resolution 就代表着 devicePixelRatio。

@media (min-resolution: 2dppx) {
body {
color: red;
}
}

上面的代码表示,在 devicePixelRatio >= 2 的设备上,字体颜色为红色。

当设备像素比为1:1时,使用1(1×1)个设备像素显示1个CSS像素;

当设备像素比为2:1时,使用4(2×2)个设备像素显示1个CSS像素;

当设备像素比为3:1时,使用9(3×3)个设备像素显示1个CSS像素。

viewport

通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。在默认情况下,一般来讲,移动设备上的viewport都是要大于浏览器可视区域的,这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewport设为980px或1024px(ios设备为980px,此处的px都为设备独立像素)

一般来说PC端端viewport跟浏览器的大小是一致的,移动端的viewport 宽度大多都是980px,可见移动端的viewport比真实的移动端屏幕大多

innerWidth/innerHeight可以查看页面的viewport

在Chrome浏览器上设置一个模拟器,宽度(设备独立像素)360px,这时候在控制台分别打印出innerWidthouterWidth,截图如下:

 
移动端viewport比其设备独立像素宽度大许多

怎么让我们看到整个页面呢?浏览器渲染完页面后,会按比例缩小,直到我们在屏幕上可以看到整个页面:

 
在viewport上渲染页面之后按比例缩小

可以看到,字体变得超级超级小。

那怎么让一个设备独立像素点对应一个CSS像素点呢,我们不想要让字变得太小啊!

<meta name="viewport" content="width=device-width, initial-scale=1">就是用来解决这个问题的。

width=device-width把viewport宽度设置称为设备的设备独立像素宽度了。这时候一个CSS像素点就对应一个设备独立像素点了!看一下效果:

 
width=device-width

这时候控制台打印innerWidthouterWidth,会发现,他们已经一样大了:

 
width=device-width

再说一下initial-scale=1,这个表达式表示页面的原始缩放比例为1。如果为2,那么页面中元素会放大一倍。但是viewport大小不变。

样例

设备为iphone6

确定的设备下,设备独立像素和物理像素都不会变化,缩放的情况下,变化的是css像素

下例中,不缩放的情况下,375px(css像素)可以填满设备的宽度,缩放倍数为375/980(375是iphone6的设备独立像素宽度,980为viewport的设备独立像素宽度),假设此时要填满设备宽度需要的css像素为x,则 x*(375/980)=375,x=375/(375/980)=980

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<img src="./img/bdyd.jpg" width="980px">
</body>
<script> </script>
</html>

  

如果设置了

<meta name="viewport" content="width=device-width">
则页面没有缩放,此时css像素等于设备独立像素,填满宽度需要的css像素为375
再继续设置图片的宽度大于375,图片显示的效果不会变化,因为图片虽然宽,但是还是会缩放到一屏显示

一般ui设计做标注的时候以设备像素比为2的做标注(2倍屏的物理像素),实际在设置css时要把标注的宽高/2(网页缩放比为100%情况下)

 
 
 
 
 
 

理解设备像素、设备独立像素、css像素、viewport的更多相关文章

  1. 设备像素,CSS像素,设备独立像素

    1.概念 设备像素(device pixel)简写DP 设备像素又称 **物理像素** ,是设备能控制显示的最小单位,我们可以把它看做显示器上的一个点.我们常说的 1920x1080像素分辨率就是用的 ...

  2. CSS像素、设备独立像素、设备像素之间关系

    CSS像素.设备独立像素.设备像素,三者联系紧密又有很大的区别,而我们主要是在做移动端开发的时候需要更多地用到这些概念,那他们分别是指什么呢? 概念 CSS像素(CSS Pixel):适用于web编程 ...

  3. CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport

    1.PX(CSS pixels) 1.1 定义 虚拟像素,可以理解为“直觉”像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px. 1.2 注意 在CS ...

  4. 移动端1px像素解决方式,从1px像素问题剖析像素及viewport

    在移动端web开发过程中,如果你对边框设置border:1px,会发现,边框在某些手机机型上面显示的1px比实际感觉会变粗,这也就是1像素问题.如下图是对桌面浏览器和移动端border设置1px的比较 ...

  5. CSS布局基础之一设备像素,设备独立像素,设备像素比,css像素之间的关系

    设备像素dp(device pixels) ppi(pixels per inch)表示每英寸所拥有的像素(pixel)数目,数值越高,代表屏幕能以更高的密度显示图像. 计算公式:ppi=像素数量/物 ...

  6. 响应式设计:理解设备像素,CSS像素和屏幕分辨率

    概述 屏幕分辨率.设备像素和CSS像素这些术语,在非常多语境下,是可互换的,但也因此easy在有差异的地方引起混淆,实际上它们是不同的概念. 屏幕分辨率和设备像素是物理概念,而CSS像素是WEB编程的 ...

  7. 设备像素,设备独立像素,CSS像素

    之前学了移动端的开发对设备像素.设备独立像素.CSS像素弄得不太清楚,所以趁周末的时间查了一下,稍加整理 一些概念 在进行具体的分析之前,首先得知道下面这些关键性基本概念. CSS像素 CSS像素是W ...

  8. HTML-HTML5+CSS3权威指南阅读(五、设备像素和CSS像素的概念)

    在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕 这篇文章是关于桌面浏览器的,其唯一目的就是为移动浏览器中相似 ...

  9. 物理像素[设备像素] & 逻辑像素[CSS像素];

    为什么移动端CSS里面写了1px,实际上看起来比1px粗 了解设备物理像素和逻辑像素的同学应该很容易理解,其实这两个px的含义其实是不一样的, UI设计师要求的1px是指设备的物理像素1px,而CSS ...

随机推荐

  1. 【python系统学习05】input函数——实现人机交互

    input函数 目录 input用途 语法 示例 参数 返回值 返回值数据类型转换 容错处理 动手吧 input用途 实现人机交互: 1.你提出问题打印在屏幕上, 2.运行程序的人再输入回答. 3.按 ...

  2. JavaWeb系统(增删改查、多条件查询功能)

    该系统是一个简单的青年服务管理系统,主要包括了较完整的常用的增删改查以及多条件查询功能,对于初学者有很大帮助. 下面是相关的Java代码.jsp页面.以及数据库的创建和相关表的设计 java代码 首先 ...

  3. IDEA使用 磨刀霍霍向代码

    工欲善其事,必先利其器 ,当下有数不清的 Java 程序员将石器时代的 Eclipse 替换成了现代化的智能开发工具 InteliJ IDEA ,写代码的小日子过得不亦乐乎(玩笑话,两者各有千秋,看个 ...

  4. Miller-Rabin​素数测试算法

    \(Miller-Rabin\)​素数测试 用途 判断整数\(n\)是否是质数,在\(n\)较小的情况下,可以使用试除法,时间复杂度为\(O(\sqrt n)\).但当\(n\)的值较大的时候,朴素的 ...

  5. windows下生成文件目录树

    1.命令提示: tree /? 2.显示当前目录下的目录树(不显示文件) tree 3.递归显示目录结构(显示文件,常用于项目说明) tree /F 4.将显示的内容重定向到txt tree > ...

  6. 做.net的成为 微软mvp 是一个目标吧。

    mvp 的评比 需要好多好多 绩效考核 比如博客排名,比如发表的文章数.

  7. 《HelloGitHub》第 46 期

    兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. 这是一个面向编程新手.热爱编程.对开源社区感兴趣 人群的月刊,月刊的内容包括:各种编 ...

  8. Docker(二) 镜像

    简介 Docker镜像是什么? 它是一个只读的文件,就类似于我们安装操作系统时候所需要的那个iso光盘镜像,通过运行这个镜像来完成各种应用的部署. 这里的镜像就是一个能被docker运行起来的一个程序 ...

  9. 【大白话系列】MySQL 学习总结 之 初步了解 MySQL 的架构设计

    一.MySQL还是个黑盒子 我们都知道,只要我们系统引入了 MySQL 驱动和连接池,就能从数据库连接池获取一个数据库连接,然后就可以执行增删改查的操作了. 可是我们并不知道 MySQL 里面是怎么执 ...

  10. Vue使用better-scroll左右菜单联动

    说明 最近想做一个vue商城小项目,练习一下vue的语法,刚刚好碰到了需要左右菜单实现联动,因此就接触了 better-scroll. github地址 中文文档. 代码 页面结构以及数据 //页面结 ...