首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

设备的屏幕像素

设备的屏幕像素 屏幕像素(Device Pixel Ratio ,DPR),实际上指的是window.devicePixelRatio ,被所有webkit浏览器以及opera所支持, 它是一个比值...其实就是用物理设备像素/css像素。 举例来说:假如一个手机的像素是640x960而css像素为320x480,那么它的屏幕像素比为2。...在浏览器中的Console中可以查看当前网页的屏幕像素。 在Console中输入window.devicePixelRatio即可查 那么屏幕像素的含义是什么呢?...下面来简单分析一下 例如在retina屏幕中(视网膜显示屏,一种新型高分辨率的显示标准),DPR=2,意味着1个css像素用2x2个物理设备像素来绘制。 为什么是2x2呢?...因为在x轴方向和y轴方向分别用两个物理像素绘制。 如下图: ? 那么屏幕像素有什么意义呢? 他能使页面更细腻的显示在一个高清分辨率的屏幕当中。

1.7K20

设备像素和CSS像素

设备像素和 CSS 像素设备像素又称为 物理像素, 是 "物理屏幕" 上真实存在的发光点,只有屏幕一经出厂就固定不会改变。...CSS 像素又称为 逻辑像素,是编程世界中虚拟的东西, 我们通过代码设置的像素都是逻辑像素。...图片图片例如: iPhone3G / iPhone3GS 3.5英寸 / 逻辑像素 320 480 / 设备像素 320 480:图片iPhone4 / 4S 3.5英寸 / 逻辑像素 320 480.../ 设备像素 640 960:图片图片不同的逻辑像素在不同的物理物理屏幕显示的效果如下:图片也就是说 CSS 像素设备像素在有的时候是不一样的,那么什么时候不一样?...在 PC 端,1个 CSS 像素往往都是对应着电脑屏幕的 1 个物理像素, 所以我们无需关心 PC 端的 CSS 像素设备像素问题,在手机端,最开始其实 1 个 CSS 个像素也是对应着手机屏幕的 1

20100
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    像素相关概念:PPI、DPI、设备像素、独立像素

    比如 设备像素(device pixels ratio),简称 DPR,DPR = 设备像素 / 设备独立像素。...其实 DPR = 设备像素 / 设备独立像 (是在同一个方向,一维的) 设备像素(DP) 定义: 设备像素又称物理像素,其尺寸大小是不会变的,从显示屏从工厂出来的那刻起,物理像素点就不会变了。...设备独立像素(DIP) 定义:设备独立像素又称逻辑像素,其尺寸大小是相对的。是一种物理测量单位,基于计算机控制的坐标系统和抽象像素。...设备像素(DPR) 设备像素 DPR(devicePixelRatio) 是默认缩放为100%的情况下,设备像素和CSS像素的比值。...DPR = 设备像素 / 设备独立像素(是在同一个方向,一维的) ? 这个概念主要是为了移动设备提出来的,最开始没有 DPR 的概念。

    2.8K20

    聊一聊CSS像素设备像素设备独立像素、dpr、ppi 之间的区别

    前言 大家好,我是HoMeTown,顺着计量单位,想继续聊一下CSS像素设备像素设备独立像素、dpr、ppi 之间的区别。...这就涉及到设备像素、css像素设备独立像素、dpr、ppi的概念。 css像素 css像素就是我们在进行开发时,经常使用的px单位。...由此可见,px会受到dpr(设备像素)与ppi(每英寸像素)的影响。...这里的分辨率其实不严谨的讲,就指的是设备独立像素,一个设备独立像素里可能会包含1个或者多个物理像素点,包含的越多,画质越高。 为什么会出现设备独立像素这种虚拟像素单位概念呢?...这种n个虚拟像素:n个物理像素比例式的换算,被统称为设备像素,也就是dpr dpr(Device pixel ratio) 设备像素,代表设备独立像素设备像素的转换关系。

    1.4K40

    【移动端网页布局】移动端网页布局基础概念 ④ ( 物理像素 | 物理像素 | 代码示例 - 100 像素在 PC浏览器 移动端浏览器 显示效果 )

    与 物理像素 概念相关 ; 物理像素 : 物理像素就是 设备 上的分辨率 , 如 1920 x 1080 像素 , 就是宽度上有 1920 个像素 , 高度上有 1080 像素 ; 物理像素 :...设置 1 像素 在 实际设备中 , 能显示的像素个数 , 就是物理像素 ; 移动端中 1 像素 , 需要结合 物理像素 进行设置 , 可能实际中对应 2 像素 , 也可能对应实际中的 0.5 像素...; 物理像素 是 移动端 设备的固有属性 ; 电脑端 设置 1 像素 就是 1 像素大小 ; 移动端设置 1 像素 , 需要结合屏幕像素进行设置 ; 不同手机的物理像素 : 可参考 【Android...100 像素 ; Pixel2 的屏幕尺寸是 1920 x 1080 , 但是设置 411 像素 , 就可以将整个屏幕宽度占用 , 相当于屏幕中的 1080 像素 , 这里说明移动设备像素值 是屏幕无关像素..., 需要结合 物理像素 才能计算出正确的 像素值 ;

    50040

    【移动端网页布局】流式布局 ① ( 流式布局简介 | 百分布局 非固定像素布局 | 根据屏幕尺寸 设备类型自动调整网页布局 )

    一、流式布局简介 流式布局 又称为 百分布局 / 非固定像素布局 ; 为 流式布局 中 盒子模型 设置 百分宽度 , 其大小可以根据屏幕宽度自适应伸缩 , 该盒子没有像素限制 , 内容自动向左右两边填充...; 流式布局 可以 根据 设备屏幕尺寸 和 设备类型 自动调整 网页布局 和 标签元素大小 , 以适应不同尺寸的 设备屏幕 ; 当 设备屏幕尺寸 发生变化时 , 标签元素的尺寸也会相应地调整 ; 移动端流式布局注意事项...测试不同设备的显示效果 : 在完成布局之后,需要 在不同的设备上测试显示效果,以确保布局在不同设备上都能正常显示。 二、流式布局代码示例 ---- 代码示例 : <!...*/ /* 设置最大宽度 浏览器放大 网页布局不能超过 980 像素宽度 */ max-width: 980px; /* 设置最小宽度...浏览器缩小 网页布局不能低于 320 像素 */ min-width: 320px; /* 版心水平居中 */ margin:

    1.1K30

    immutable.js 原生 JavaScript 快得多

    Immutable.js是一个为 JavaScript 提供不可变集合的库,其灵感来源于 Clojure[脚本] 的不可变数据结构。它由 Facebook 开发。...本文中我们会讲到在一个常见情形中, immutable.js javascript会快得多:不修改原数组的情况下向数组添加元素。...而 immutable.js的 push的返回一个添加了新元素的新列表;而且,这非常快。 ?...不可变列表对决 JavaScript 数组 首先,在浏览器中加载 immutable.js: Object.keys(Immutable) 这里有一个计算代码执行时间的 benchmark函数: function...在我的计算机上, immutable.js的 push原生 javascript的 push快约 100 倍。 注意,在往 immutable.js列表中添加元素时,列表本身并未改变。

    1K30

    Auto.js设备相关的指令

    device模块提供了与设备有关的信息与操作,例如:获取设备宽高,内存使用率,IMEI,调整设备亮度、音量等。 此模块的部分函数,例如:调整音量,需要 "修改系统设置" 的权限。...获取设备信息 1. 获取设备屏幕分辨率宽度; device.width 2. 获取设备屏幕分辨率高度; device.height 3....获取当前电量百分; device.getBattery() 23. 获取设备是否正在充电; device.isCharging() 2. 获取并改变设备亮度 1....唤醒设备,包括唤醒设备CPU、屏幕等,可以用来点亮屏幕; device.wakeUp() 3. 如果屏幕没有点亮,则唤醒设备; device.wakeUpIfNeeded() 4. ...在某些设备上,如果不加参数timeout,只能在Auto.js的界面保持屏幕常亮,在其他界面会自动失效,这是因为设备的省电策略造成的。

    3.4K20
    领券