window.devicePixelRatio Window 接口的devicePixelRatio返回当前显示设备的物理像素分辨率与CSS 像素分辨率之比。 此值也可以解释为像素大小的比率：一个 CSS 像素的大小与一个物理像素的大小。 简单来说，它告诉浏览器应使用多少屏幕实际像素来绘制单个 CSS 像素。
window.devicePixelRatio 可浏览器放大或缩小的倍数 确保来放大缩小画布的宽高 <canvas id="mainCanvas" :width="canvasWidth" :height="canvasHeight" :style="{ width: width + 'px', height: height + 'px' }" ></canvas
定义window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。公式表示就是：window.devicePixelRatio = 物理像素 / dips 理解移动端的设备多种多样，不同的设备又有不同的分辨率，低一点的有 800 * 400，中等的有 1280 * 720，高的有 1920 * 108
核心代码 let devicePixelRatio = window.devicePixelRatio || 1; console.log(window.devicePixelRatio) let backingStoreRatio = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStoreP
目录 引子 屏幕尺寸 像素 分辨率 devicePixelRatio 参考资料 引子 最开始写页面的时候，对页面里面的 px 还是蛮好奇的，电脑上的分辨率好像正好跟页面渲染的宽度值对应，但手机里面却不是这样的，记得当时还去找了相关资料，好像知道是怎么回事。最近脑海里再次想起了这个问题，但已经不知
高清屏（HDPI）显示会带来什么问题？ 控件、文字、图片变小为什么会造成以上问题，由于DPI大，实际上是物理像素密度大，在物理像素和逻辑像素比（devicePixelRatio）一定的情况下（默认为1），即1个物理像素对应一个逻辑像素，这样显示时，必然会导致图片看起来小。 如何解决？ 改变devicePixelRatio，比
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- <meta name="viewport" content="width=device-width,initial-scale=.33333,min
window.devicePixelRatio = 物理像素/理论像素； 目前window10系统可以通过 设置-显示 修改此比值； 第一个window.screen是dpi为100%时的数据，第二个的dpi为150%；可见js中获取到的px都是 理论像素； 可参考文章： 移动前端开发之viewport,devicePixelRatio的深入理解 name="viewport" wi
一般我们在android,ios中都有自己的尺寸，如：dp,pt 但是在flutter中写尺寸是没有单位的。如： SizedBox(height: 736,width: 375,child: Container(color: Colors.lightBlueAccent) ) 实际上它的尺寸当然是有的。 在不同设备中它与 devicePixelRatio 属性有关，通过此属性得到一个逻
https://www.jb51.net/article/155482.htm const isIphonex = () => { // X XS, XS Max, XR const xSeriesConfig = [ { devicePixelRatio: 3, width: 375, height: 812, }, { devicePixelRatio: 3, width: 414, height: 896, }, { devicePixelRatio
