document.documentElement.clientWidth       不包含滚动条

window.innerWidth                                            +滚动条

window.outerWidth                                            +浏览器边框

window.width                                                     屏幕区域

IPhone 6 的 屏幕分辨率 为 750*1334

IPhone 6 的尺寸 为 4.7 英寸

IPhone 6 的 像素比 DPR 为 2                              window.devicePixelRatio;

IPhone 6 的 独立像素 为 375*667                        window.innerWidth;

IPhone 6 的布局(视口)像素为 980*1743              document.documentElement.clientWidth

基础知识

图像其实都是由一个一个格子组成

像素比

  • 屏幕尺寸
  • 指的是屏幕的对角线长度,单位是 inch 英寸,1英寸 约等于 2.54 厘米

常见的屏幕有 2.4,2.8,3.5,3.7,4.2,5.0,5.5,6.0

IPhone4    3.5

IPhone6    4.7

IPhone6Plus    5.5

  • 屏幕分辨率

IPhone6 的屏幕分辨率为 750*1334

  • 指在 横 纵 向上的像素点数(物理像素,构成了屏幕的分辨率),单位是 px,1px = 1 个像素点,即 1 像素指的是物理设备的 1 个像素点
  • 横纵向上,指 xy 轴正方向
  • 高清屏(视网膜屏)
  • 屏幕像素密度 / 像素密度 / 屏幕密度 = 屏幕分辨率 / 屏幕尺寸 = (1080*1920)/5 = Math.sqrt(1080*1080+1920*1920)   /5 = 440 dpi

屏幕上每英寸 可以显示的像素点的数量,单位是 ppi,即 "pixels per inch",也有叫 dpi,都是由设备厂商规定的,不能进行修改

Mobile 相关

  •  设备像素(物理像素)

屏幕上能显示的最小粒度(可以理解为屏幕上最小的一个点)

  • 显示设备中的一个最微小的物理部件
  • 每个像素可以根据操作系统设置自己的颜色和亮度(手机亮度调节,其实就是调节每个物理像素的亮度)
  • 任何设备的物理像素 数量都是固定的
  • css 像素

是一个抽象的单位,主要使用在浏览器上,用来精确的度量(确定)Web 页面上的内容

是由 Web 开发者 创造的,在 css 或者 JavaScript 中使用的一个抽象的层

一般情况下,css 像素 被称为 与设备无关的像素(device-independent 像素),简称 "DIPs"

在一个标准的显示密度下(普通屏),一个 css 像素 对应一个 设备像素

  • css 像素 与 物理像素 之间的关系
  • 一个 width 为 200px 的元素,占据了 200 个 css 像素
  • 但这 200 个像素到底占据了多少个 物理像素 ,取决于
  • 屏幕特性(根据 像素比 区分)
    • 普通屏
    • 高清屏
  • 用户缩放行为
    • 放大
    • 缩小

如果是普通屏, css 像素 / 物理像素 = 1

如果是高清屏, css 像素 / 物理像素 = 1 / 多

在苹果的高清屏上,像素密度是普通屏幕的 2 倍,这个元素就跨越了 400 个设备像素,如果用户放大,它将跨越更多的设备像素

  • 设备独立像素(密度无关像素)

也是由 设备厂商 规定的,是不可进行修改的

可以认为是计算机坐标系统中的一个点

这个点代表一个可以由程序使用的虚拟像素(比如 css 像素),然后由关系系统转换为 物理像素。

在某种条件下,设备独立像素 会转换为 相应的 css 像素

  • 位图像素

一个位图像素,是 栅格图像(png,jpg,gif) 的最小数据单元

1 个位图图像 对应 1 个物理像素时,图片是最清晰的。

  • 对于 Web 开发者而言

我们使用的 css 和 JavaScript 定义的像素,本质上表示的都是 css 像素

在开发过程中,并不在意 css 像素到底跨越了多少个设备像素,

这个依赖于 屏幕特性和用户缩放行为的复杂计算 交给了浏览器。

  • 像素比(屏幕特性,高清屏还是普通屏?)

像素比 DPR  = 设备物理像素 / 设备独立像素

window.devicePixelRatio = 物理像素 / 独立像素

如果 console.log(window.devicePixelRatio); 是 1 ,则是普通屏

IPhone 6 的 像素比 DPR 是 2

IPhone 6 Plus 和 IPhoneX 的 像素比 DPR 是 3

mobile_像素的更多相关文章

  1. 有趣的 CSS 像素艺术

    原文地址:https://css-tricks.com/fun-times-css-pixel-art/#article-header-id-4 译者:nzbin 友情提示:由于国内网络的原因,Cod ...

  2. 使用 JavaScript 和 canvas 做精确的像素碰撞检测

    原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...

  3. canvas 制作flappy bird(像素小鸟)全流程

    flappy bird制作全流程: 一.前言 像素小鸟这个简单的游戏于2014年在网络上爆红,游戏上线一段时间内appleStore上的下载量一度达到5000万次,风靡一时, 近年来移动web的普及为 ...

  4. 移动WEB像素相关知识

    了解移动web像素的知识,主要是为了切图时心中有数.本文主要围绕一个问题:怎样根据设备厂商提供的屏幕尺寸和物理像素得到我们切图需要的逻辑像素?围绕这个问题以iphone5为例讲解涉及到的web像素相关 ...

  5. 超像素经典算法SLIC的代码的深度优化和分析。

    现在这个社会发展的太快,到处都充斥着各种各样的资源,各种开源的平台,如github,codeproject,pudn等等,加上一些大型的官方的开源软件,基本上能找到各个类型的代码.很多初创业的老板可能 ...

  6. UNITY和图片像素的换算

    https://zhidao.baidu.com/question/143233873.html 1米X1米换算成像素是2835X2835的

  7. [LeetCode] Smallest Rectangle Enclosing Black Pixels 包含黑像素的最小矩阵

    An image is represented by a binary matrix with 0 as a white pixel and 1 as a black pixel. The black ...

  8. D3D三层Texture纹理经像素着色器实现渲染YUV420P

    简单记录一下这两天用Texture实现渲染YUV420P的一些要点. 在视频播放的过程中,有的时候解码出来的数据是YUV420P的.表面(surface)通过设置参数是可以渲染YUV420P的,但Te ...

  9. 根据判断PC浏览器类型和手机屏幕像素自动调用不同CSS的代码

    1.媒体查询方法在 css 里面这样写 -------------------- @media screen and (min-width: 320px) and (max-width: 480px) ...

随机推荐

  1. DirectX11 With Windows SDK--06 DirectXMath数学库

    前言 xnamath.h原本是位于DirectX SDK的一个数学库,但是现在Windows SDK包含的数学库已经抛弃掉原来的xnamath.h,并演变成了现在的DirectXMath.h.其实本质 ...

  2. 下拉框 -------> 初始化数据

    在Web应用程序中开发编写功能时,时常用到获取数据库中的数据并将值初始化在HTML中的标签上. 1.Form from django.forms import Form from django.for ...

  3. mysql用户管理与备份

    用户管理 我们知道在Mysql中root用户是最高权限的用户,其他用户的创建和权限授予都是通过root用户来操作的 查看用户 在root用户界面下 select user,host,password ...

  4. 【转载】c++指针的指针和指针的引用

    https://www.cnblogs.com/li-peng/p/4116349.html

  5. JGUI源码:Accordion兼容IE8实现(3)

    本来不考虑IE8,但是还是有部分客户用的XP,有不代表没有,尽量做一下兼容处理1.before,after,要使用:不能使用:: 2.阻止冒泡 function stopPropagation(e) ...

  6. 学习python笔记 协程

    下面将一个经典的消费者和生产者的案例进行分析: import time def consumer(): r = '' while True: n = yield r if not n: return ...

  7. Linux下间隔多少秒 (即以秒为单位) 去执行某条命令或某个shell脚本的操作方法【转】

    在日常运维工作中, 经常会碰到以秒为单位去定时执行某些命令或监控脚本的需求. 说到定时任务就要用到crontab,通常来说,crontab的最小单位是分钟级别,要想实现秒级别的定时任务,就要进行特殊设 ...

  8. 使用fiddler模拟重复请求接口

    使用fiddler模拟重复请求接口 重复请求某个接口,比如评论一条,这样点击多次就可以造多个评论数据

  9. LabVIEW--使用云端编译器编译多个vi

    使用ni 云服务器编译vi 详细请看链接: https://users.niwsc.com/compilecloud/#/ http://www.ni.com/white-paper/52328/en ...

  10. [Linux]ln -al输出内容解析

    第一项的第一位是文件类型:-: 表示普通文件d: 目录b: 块特殊文件c: 字符特殊文件l:  符号链接文件p: 命名管道文件FIFOs: 套接字文件 第二项是该文件的inode的链接计数,即stat ...