美文网首页
设备像素比devicePixelRatio

设备像素比devicePixelRatio

作者: 秋玄语道 | 来源:发表于2017-12-19 14:12 被阅读0次

    Window.devicePixelRatio概述

    此属性返回当前显示设备的物理像素分辨率与CSS像素分辨率的比值。该值也可以被解释为像素大小的比例:即一个CSS像素的大小相对于一个物理像素的大小的比值。(公式表示就是:window.devicePixelRatio = 物理像素 / dips)
    这个值的改变不会触发任何回调函数或者被其他事件监听(例如,如果你拖动窗口使其在不同屏幕密度的显示器上显示)
    dip或dp,(device independent pixels,设备独立像素)与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。

    所有非视网膜屏幕的iphone在垂直的时候,宽度为320物理像素。当你使用<meta name="viewport" content="width=device-width">的时候,会设置视窗布局宽度(不同于视觉区域宽度,不放大显示情况下,两者大小一致,见下图)为320px, 于是,页面很自然地覆盖在屏幕上。

    这样,非视网膜屏幕的iphone上,屏幕物理像素320像素,独立像素也是320像素,因此,window.devicePixelRatio等于1.

    而对于视网膜屏幕的iphone,如iphone4s, 纵向显示的时候,屏幕物理像素640像素。同样,当用户设置<meta name="viewport" content="width=device-width">的时候,其视区宽度并不是640像素,而是320像素,这是为了有更好的阅读体验 – 更合适的文字大小。

    这样,在视网膜屏幕的iphone上,屏幕物理像素640像素,独立像素还是320像素,因此,window.devicePixelRatio等于2.

    适配移动端的代码:

            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Look at the picture and write the words</title>
             <script>
                var num = 1 / window.devicePixelRatio;
                document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale='+num+',minimum-scale='+num+',maximum-scale='+num+'" />')
                var fontNum = document.documentElement.clientWidth / 10;
                var html = document.getElementsByTagName('html')[0];
                html.style.fontSize = fontNum + 'px';
             </script>
    

    # 移动端Web页面适配方案

    相关文章

      网友评论

          本文标题:设备像素比devicePixelRatio

          本文链接:https://www.haomeiwen.com/subject/yxwbwxtx.html