window.devicePixelRatio简介

最新推荐文章于 2024-11-12 09:08:50 发布
最新推荐文章于 2024-11-12 09:08:50 发布 · 1k 阅读 · 0
文章标签：

#devicePixelRatio

本文介绍了window.devicePixelRatio的概念，它是设备物理像素与设备独立像素的比例，并提供了不同浏览器对该属性的支持情况。

本文大部分内容来自：http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html

 

1、定义？

 

 

  • window.devicePixelRatio is the ratio between physical pixels and device-independent pixels(dips) on the device.
window.devicePixelRatio 是 设备物理像素和设备独立像素(dips)的比例


  • window.devicePixelRatio = physical pixels / dips

2、 浏览器支持情况？

  • IE和FF目前不支持
  • 移动版Opera12支持，10不支持
  • 桌面版Opera返回1而不是2
  • UC总是返回1
  • Chrome22 返回正确的2，Chrome19返回不正确的1
  • MeeGo Webkit可怕的地方在于当你应用meta viewport的时候会使返回值从1变成1.5




相关词汇：

  • ratio 比例，比率
  • device 装置，设备
  • horrible 可怕的
web入门之 window.devicePixelRatio 设备像素比
蛐蛐的博客
05-08 1598
文档：Window.devicePixelRatio - Web APIs | MDN 1.简介 window.devicePixelRatio 接口返回当前设备的物理像素分辨率与 CSS 像素分辨率 的比率。 一个CSS 像素等于多少个物理像素。浏览器应该使用多少实际像素来绘制单个 CSS 像素。 可以使用window.matchMedia()来检查值是否发生变化 2.值 双精度浮点值，显示器分辨率与以 CSS 像素为单位的分辨率之比。 值 1 表示经典的 96 DPI显示，
当前设备的物理像素分辨率与CSS像素分辨率之比window.devicePixelRatio
first_shun的博客
05-30 1026
window.devicePixelRatio属性返回的value的值是当前设备的物理像素分辨率与css像素分辨率的比率，简单的说，该比例为4，则代表1个css像素由4个实际物理像素组成。 var value = window.devicePixelRatio; value是一个double类型的值，使用window.devicePixelRatio属性最常见的使用是可以矫正canvas的使用分辨率； <!DOCTYPE html> <html class="no-js">
window.devicePixelRatio
weixin_30311605的博客
01-23 425
window.devicePixelRatio是设备上物理像素和逻辑像素的比例。公式：window.devicePixelRatio = 物理像素 / 逻辑像素 通常我们用的逻辑像素：逻辑像素 =window.devicePixelRatio /物理像素 转载于:https://www.cnblogs.com/xjy20170907/p/8334829.html...
设备像素比devicePixelRatio简单介绍
寒风问雪的专栏
12-13 1493
by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=2568 本文所说devicePixelRatio其实指的是window.devicePixelRatio, 被所有WebKit浏览器以及Opera所支持，随着显示器的发展，这个属性也慢慢登上了前端技术的舞台。
Window.devicePixelRatio(设备像素比)
zhaominyong的专栏
07-22 1万+
Window接口的devicePixelRatio返回当前显示设备的物理像素分辨率与CSS像素分辨率之比。 此值也可以解释为像素大小的比率：一个CSS像素的大小与一个物理像素的大小。 简单来说，它告诉浏览器应使用多少屏幕实际像素来绘制单个CSS像素。 当处理标准显示器与HiDPI或Retina显示器之间的差异时，这很有用，后者使用更多的屏幕像素绘制相同的对象，从而获得更清晰的图像。 您可以使用window.matchMedia()检查devicePixelRatio的值是否发生更改（例如，如果用户将..
关于window.devicePixelRatio
weixin_44283589的博客
05-25 2003
例如，如果一个设备的物理像素分辨率是640x480，CSS像素分辨率是320x240，那么 window.devicePixelRatio 的值就是 2。在移动设备中，window.devicePixelRatio 常用于响应式设计，以确定设备的屏幕尺寸和分辨率，从而为不同设备提供不同的CSS样式。但是，为了满足不同设备的显示需求，开发人员使用CSS像素，这是一个抽象的单位，与设备的物理像素无关。CSS像素是指网页上的一个点，而这个点会被浏览器渲染成多个物理像素，以适应不同设备的分辨率。
quick使用window.devicePixelRatio报错
04-24
好的，我现在需要解决用户在使用`window.devicePixelRatio`时遇到的报错问题。首先，我得理解这个问题的可能原因。用户提到的是在JavaScript中使用这个属性时报错，可能的情况包括环境不支持、拼写错误或者调用时机...
touchstart 的位置 受 window.devicePixelRatio 影响
最新发布
08-26
首先，用户的问题是：我想了解 touchstart 事件的位置是否受 window.devicePixelRatio 影响。意思是“touchstart 事件的位置是否受 window.devicePixelRatio 影响”。 关键点是：touchstart 事件的位置坐标（如 ...
window.devicePixelRatio 的值和什么有关系
06-19
### `window.devicePixelRatio` 的值与屏幕分辨率、显示设置和设备类型之间的关系 `window.devicePixelRatio` 是一个重要的属性，用于描述当前设备的物理像素与 CSS 像素之间的比例。其值受到多种因素的影响，包括...
设备像素比（devicePixelRatio）
热门推荐
xueli_2017的博客
06-12 2万+
设备像素比（devicePixelRatio） 定义 window.devicePixelRatio是设备的物理像素和设备独立像素device-independent pixels (dips)之间的比率。window.devicePixelRatio = physical pixels / dips dips 是一个抽象像素，用于向CSS中的宽度、高度、媒体查询和meta 的viewport 中...
Window.devicePixelRatio
popstarqq的博客
12-03 1218
devicePixelRatio：指示显示器的物理像素分辨率与CSS像素分辨率之比；标准显示器该值为1； 对于HiDPI / Retina显示屏则期望值为2；比例越高，说明同一块大小区域里面填充的像素点越多，那自然越细腻，越清晰。 HiDPI:全称是High Dots Per Inch，字面意思就是「每英寸包含数量更多的像素」，通俗点讲也就是分辨率特别高但是尺寸并不大的屏幕，在市场上被称为Retina(视网膜)屏幕。 作用: (1) 更正canvas比例，能够适配标准显示器屏幕和高分辨率retina
window属性：devicePixelRatio
qq_35876316的博客
11-12 2721
是一个只读属性，返回设备的像素比例（DPR，Device Pixel Ratio）。这个比例表示物理像素和设备独立像素（CSS像素）之间的比率。简而言之，它告诉我们一个物理像素由多少个设备独立像素组成。
JS获取屏幕缩放比例与分辨率，VUE
Aotman_的博客
10-30 1004
分辨率的高：window.screen.height*this.getDevicePixelRatio()/100 //乘以缩放比例为真实的像素。分辨率的宽：window.screen.width*this.getDevicePixelRatio()/100 //乘以缩放比例为真实的像素。屏幕可用工作区的高度：window.screen.availHeight;屏幕可用工作区的宽度：window.screen.availWidth;
JS设置浏览器缩放比例
大家好，我是+V
08-27 2万+
JS设置浏览器缩放比例 因为 windows10 的操作系统，尽管是19201080的分辨率，但是发现我的页面显示是正常的，但是我同学打开说滚动条特别多，然后就特别的丑陋，尤其是出现了横向的滚动条，这个就很难让人接受，但是我这边就显示正常，核对了一下，我们用的都是19201080的分辨率，理论上是不会出现这种问题的，于是想到了可能是由于windows 操作系统缩放的问题，windows 操作系统尽管是 1920*1080，但是默认他会推荐你使用125%的缩放比例，也就是说操作系统的所有页面都被放大了，所以说
js 获取当前窗口显示的放大比例
Teemo_shape的博客
11-22 1672
可以获取当前窗口显示的放大比例，也称为设备像素比 (devicepixelratio)。这通常用于处理高DPI (高分辨率)屏幕上的视图缩放。您可以使用window.devicePixelRatio 属性来获得当前设备像素比。在这个示例中，devicePixelRatio将包含当前窗口显示的放大比例。通常情况下，这人值将是1，表示没有缩放。在高DPI屏幕上，它可能是1.5、2或更高，具体取决于屏幕的配置,请注意，这个值是只读的，而且在某些浏览器中可能不支持。
勇者斗恶龙：深入理解设备像素比
两个月亮
02-19 2333
在浏览器中，网页的缩放改变的内容其实是当前页面所使用的设备像素比，放大页面将增大设备像素比，缩小页面将减小设备像素比。在 JavaScript 中，你可以使用 console.log(window.devicePixelRatio);来输出当前设备在当前页面使用的设备像素比。
设备像素比 devicePixelRatio
飞扬_柳絮的专栏
09-26 1387
设备像素比 window.devicePixelRatio = 设备物理像素 / 设备独立像素(dpi) 常见设备Dpr查询：http://screensiz.es/phone 设备物理像素: 设备设备分辨率，eg： iPhone 6  750*1334设备独立像素: 与设备无关的逻辑像素(在没有缩放的情况下，1个css像素等同于一个设备独立像素) Retina高清屏造成图像模糊的原因：  ...
了解Window.devicePixelRatio（设备像素比）
weixin_zsh的博客
12-26 7208
记录一下Window.devicePixelRatio这个特性。 介绍：Window.devicePixelRatio 返回当前显示设备的物理像素分辨率与CSS像素分辨率的比值。该值也可以被解释为像素大小的比例：即一个CSS像素的大小相对于一个物理像素的大小的比值。 window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixel...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值