设备像素比 devicePixelRatio

最新推荐文章于 2024-07-23 15:48:39 发布
最新推荐文章于 2024-07-23 15:48:39 发布
阅读量1.2k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： Css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/tjcjava/article/details/82860386

设备像素比 window.devicePixelRatio = 设备物理像素 / 设备独立像素(dpi)

常见设备Dpr查询：http://screensiz.es/phone

设备物理像素: 设备设备分辨率，eg： iPhone 6  750*1334
设备独立像素: 与设备无关的逻辑像素(在没有缩放的情况下，1个css像素等同于一个设备独立像素)

Retina高清屏造成图像模糊的原因：
    同样尺寸的一张图片(css为单位)，它的每一个css像素点 --> 在Retina高清屏下被用更多的设备物理像素展示，即放大，所以会模糊；

解决方式：

   根据设备 window.devicePixelRatio 不同的dpr，采用不同的图片

   

备注：
  设备屏幕尺寸：设备对角线的长度

参考文章：http://www.cnblogs.com/jingwhale/p/5741567.html

  

web入门之 window.devicePixelRatio 设备像素比
蛐蛐的博客
05-08 1450
文档：Window.devicePixelRatio - Web APIs | MDN 1.简介 window.devicePixelRatio 接口返回当前设备的物理像素分辨率与 CSS 像素分辨率 的比率。 一个CSS 像素等于多少个物理像素。浏览器应该使用多少实际像素来绘制单个 CSS 像素。 可以使用window.matchMedia()来检查值是否发生变化 2.值 双精度浮点值，显示器分辨率与以 CSS 像素为单位的分辨率之比。 值 1 表示经典的 96 DPI显示，
Qt高分辨率自适应后，获取当前设备像素比
Larry_Yanan的博客
06-21 1001
qt常用的高分辨率自适应，在main中设置之后，我们的软件界面就可以根据当前显示器的分辨率，自动缩放了。简单描述一下场景：我们的软件是按照1080p显示器设计的，最后通过AA_EnableHighDpiScaling，可以在4k屏上等比还原（扩大了2倍）。此时，我使用以下方法，获取到的屏幕尺寸都是1920x1080，而不是实际的3840x2160.但与此同时，qt一些桌面屏幕类获取到的屏幕宽度是错误的，当我们想要获取的时候就出现难题了。
设备像素比（devicePixelRatio）
热门推荐
xueli_2017的博客
06-12 2万+
设备像素比（devicePixelRatio） 定义 window.devicePixelRatio是设备的物理像素和设备独立像素device-independent pixels (dips)之间的比率。window.devicePixelRatio = physical pixels / dips dips 是一个抽象像素，用于向CSS中的宽度、高度、媒体查询和meta 的viewport 中...
移动端兼容性适配问题
奔跑的小猪仔
06-07 2051
设备像素(又称为物理像素): 指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，和屏幕尺寸大小有关,设备屏幕的物理像素，任何设备的物理像素的数量都是固定的，单位pt，磅 css像素(也叫虚拟像素)：指的是 CSS 样式代码中使用的逻辑像素，在 CSS 规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px 是一个相对单位，相对的是设备像素(device pixel) DPR(设备像素比)：设备像素比 =
设备像素比
weixin_44283589的博客
01-30 513
例如，如果设备像素比为2，意味着设备的屏幕分辨率是CSS像素的两倍。这意味着在CSS中定义的100px宽度的元素在设备上实际上会占据200个物理像素。通过使用window.devicePixelRatio属性，我们可以根据设备的像素比来调整网页的布局和样式，以适应不同的屏幕分辨率。设备像素比是设备像素和CSS像素之间的比率，在缩放比为1的情况下计算得出。window.devicePixelRatio是一个JavaScript属性，用于获取设备的像素比（DPR）
一些移动端设备的devicePixelRatio
JasonRaySHD的博客
04-28 2031
设备像素为:1.0 (-webkit-min-device-pixel-ratio) 所有non-Retina mac电脑 苹果iPhone(第一代) 苹果iPhone 3 g 苹果iPhone 3 gs 苹果iPad(第一代) 苹果iPad 2 苹果iPad迷你(第一代) 宏碁Iconia A500 三星Galaxy Tab 10.1 三星Galaxy S 设备像素为:1.3 (-w...
当前设备的物理像素分辨率与CSS像素分辨率之比window.devicePixelRatio
first_shun的博客
05-30 1000
window.devicePixelRatio属性返回的value的值是当前设备的物理像素分辨率与css像素分辨率的比率，简单的说，该比例为4，则代表1个css像素由4个实际物理像素组成。 var value = window.devicePixelRatio; value是一个double类型的值，使用window.devicePixelRatio属性最常见的使用是可以矫正canvas的使用分辨率； <!DOCTYPE html> <html class="no-js">
CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport(1)
2401_84092456的博客
05-05 373
一只笔的像素如下：自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
qq_33834489的博客
02-03 3824
最近看了很多这方面的文章，能搜到的基本看了个遍，但感觉还是似懂非懂，知道这个东西，很难说出这是个什么东西，先整理一些概念，慢慢消化，以后慢慢探索其中的原因。 1、PX(CSS pixels) 1.1 定义 虚拟像素，可以理解为“直觉”像素，CSS和JS使用的抽象单位，浏览器内的一切长度都是以CSS像素为单位的，CSS像素的单位是px。 1.2 注意 在CSS规范中
设备的屏幕像素比
阿年的博客
01-31 1292
设备的屏幕像素比 屏幕像素比（Device Pixel Ratio ，DPR），实际上指的是window.devicePixelRatio ,被所有webkit浏览器以及opera所支持， 它是一个比值，既然是一个比值那他是怎么算出来的呢？其实就是用物理设备的像素/css像素。 举例来说：假如一个手机的像素是640x960而css像素为320x480，那么它的屏幕像素比为2。 在浏览器中的Console中可以查看当前网页的屏幕像素比。 在Console中输入window.devicePixelRatio
dpr——设备像素比（device pixel ratio）
weixin_30797199的博客
10-16 388
设备像素比 = 物理像素 / 逻辑像素 1、物理像素 　　显示器上最小的物理显示单元（像素颗粒），在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。 例如：手机大小固定，物理像素越高，画面越清晰细腻。 2、逻辑像素 　　可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素，也可称为设备独立像素，密度无关像素。 例如：设计图的大小是多少px ...
理解设备像素比devicePixelRatio
想搞全栈的前端
06-02 7436
定义 window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。 公式表示就是：window.devicePixelRatio = 物理像素 / dips 理解 移动端的设备多种多样，不同的设备又有不同的分辨率，低一点的有 800 * 400，中等的有 1280 * 720，高的有 1920 * 108...
WHAT - 屏幕 dpr 设备像素比率
weixin_58540586的博客
07-23 1221
DPR（设备像素比率）常常在讨论屏幕分辨率和显示质量时使用。设备像素比率（DPR, Device Pixel Ratio）表示物理像素（device pixels）与 CSS 像素（CSS pixels）之间的比例。它反映了设备的屏幕密度，通常用来调整网页元素在高分辨率屏幕上的显示效果。在高 DPI 设备上，DPR 通常大于 1。
勇者斗恶龙：深入理解设备像素比
两个月亮
02-19 2215
在浏览器中，网页的缩放改变的内容其实是当前页面所使用的设备像素比，放大页面将增大设备像素比，缩小页面将减小设备像素比。在 JavaScript 中，你可以使用 console.log(window.devicePixelRatio);来输出当前设备在当前页面使用的设备像素比。
设备像素比devicePixelRatio简单介绍
寒风问雪的专栏
12-13 1454
by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=2568 本文所说devicePixelRatio其实指的是window.devicePixelRatio, 被所有WebKit浏览器以及Opera所支持，随着显示器的发展，这个属性也慢慢登上了前端技术的舞台。
物理像素，逻辑像素，设备像素比，分辨率以及为何移动端需要适配(通俗易懂)
justgolden的博客
05-15 671
以下内容均为个人理解，如有问题，欢迎指正！！
devicePixelRatio
最新发布
04-12
### devicePixelRatio 的定义 `devicePixelRatio` 是 Web 开发中的一个重要属性，用于表示设备物理像素与 CSS 像素之间的比例关系。具体来说，它是一个浮点数值，描述了屏幕上的一个 CSS 像素对应多少个实际的设备像素[^2]。 例如，在高分辨率显示屏（如 Retina 显示屏）上，`devicePixelRatio` 可能会大于 1，这意味着单个 CSS 像素可能由多个设备像素组成。这使得图像和其他视觉元素可以更清晰地显示在屏幕上。 --- ### `devicePixelRatio` 的用法 开发者可以通过 JavaScript 访问 `window.devicePixelRatio` 属性来获取当前设备的比例值： ```javascript const dpr = window.devicePixelRatio; console.log(`Device Pixel Ratio: ${dpr}`); ``` 此属性通常被用来优化图形渲染和图片加载过程。例如，当加载图片时，可以根据不同的 `devicePixelRatio` 提供不同分辨率的资源文件，从而提升用户体验并减少不必要的带宽消耗。 --- ### 技术细节及相关场景 #### 高清图适配 为了适应具有较高 `devicePixelRatio` 的设备，开发人员经常采用以下策略之一： - **提供多倍图**：通过媒体查询或动态脚本检测用户的 `devicePixelRatio` 并加载相应的高清版本图片。 ```css /* 使用 media query */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { img.high-res { content: url('image@2x.png'); } } ``` - **SVG 图像**：对于矢量图形，推荐使用 SVG 文件格式，因为它们天生支持任意缩放而不失真。 #### 渲染性能影响 尽管较高的 `devicePixelRatio` 能够显著改善画质，但也增加了 GPU 和 CPU 的负担。特别是在移动平台上，过多复杂的纹理处理可能会抵消硬件加速带来的优势[^3]。因此，在 Unity 或其他游戏引擎中设计跨平台项目时，应考虑针对低 DPI 设备简化材质贴图以及几何结构复杂度。 另外需要注意的是，虽然 iOS 设备采用了基于瓦片延迟渲染的技术架构[^1]，但仍然受到内存带宽限制的影响；如果应用程序试图绘制大量超出视口范围的内容，则可能导致帧率下降等问题发生。 --- ### 总结 综上所述，理解并合理运用 `devicePixelRatio` 对于构建响应式的网页应用至关重要。无论是调整字体大小还是选择合适的图片尺寸，都需要充分考虑到目标受众群体所使用的终端特性差异所带来的挑战。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值