请问这个怎么解释

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .sky{
            font-size: 26px;
            background-color: gray;
           /* width: 400px;*/
/*
            display: flex;*/
          /*  flex-wrap:wrap;
            justify-content: space-around;*/

        }
        .one,.two,.three,.four,.five{
            /*font-size: 18px;*/
          
            width: 375px;
            
            font-size: 15px;
            background:red;
            word-break: break-all;
        }
        .two{
            background-color: yellow;
        }
        .three{
            background-color: blue;
        }
        .four{
            background-color: black;
        }
        .five{
            background-color: orange;
        }
       
        </style>
       <meta name="viewport" content="width=device-width,initial-scale=0.3">

</head>
   

<body>
   <div class="sky" style="width: 375px;">
       <div class="cloud one">do cu mentE leme nt.clien tWid document Element.cl ientWid do cum e ntE lement.cl ient Wid documen tElemen t.clien tWid documentE lement.client Wid documentE lement.clien tWid documentElement.clientWid documentElement.clientWid</div>
      
   
   <div class="law two">dsdsfsdfsf</div>
   <div class="three"></div>
   <div class="four"></div>
   <div class="five"></div>
</div>
</body>
</html>

请问老师这段代码我设置了缩放比是0.3，在iphone6上岗我的理解是视口=物理像/缩放比，也就是视口宽=750/0.3=2500px。可是为什么我自己测试在iPhone的chorome浏览器中这个视口宽仅占据了一小部分屏幕？？

hy_wang 2018-05-29

源自：移动基础 3-9 选择题

收起

6回答

一路电光带火花 2018-05-30 18:55:53

同一个设备上，物理像素是固定的，就像我们买手机之类的，厂商在出厂时就设置好了。就是说设备的分辨率是固定的。但是自己写的网页呀代码呀，在显示的时候，会受到initial-scale的影响，缩放的，肯定跟不缩放的不一样是吧。你结合这两个来看下。

https://blog.csdn.net/zhouziyu2011/article/details/70176511

http://yunkus.com/physical-pixel-device-independent-pixels/

DPR这个应该是不变的，你可以使用window.devicePixelRatio来获取下。

收起回答

提问者 hy_wang #1

请问如果在手机上缩放网页大小不就是改变了设备独立像素。物理像素不变那么不就是改变了设备像素比吗

2018-05-30 22:38:33
一路电光带火花回复提问者 hy_wang #2

你这个......，你可以自己测下看看，设备像素比变不变window.devicePixelRatio可以获取。手机上强制缩放网页那是改变了显示比例。就跟你放大镜看东西，把东西放大来看效果，但是实际的不是你看到的这么大的。

2018-05-31 11:47:36

好帮手慕糖 2018-05-30 14:13:14

你好，如下，老师这个物理像素是750px，是设备像素比是2，所以得出来的是750，可以参考下面的公式理解，

但是实际显示的效果还与你设置的缩放比有关系，案例中老师的缩放比是1，但是你的缩放比是0.3，所以实际效果还是有区别的，

祝学习愉快~

收起回答

提问者 hy_wang #1

那请问老师改变了缩放为0.3 对应苹果6的屏幕宽仍然是750但是相当于 ideal viewport变成了1250px （也就是屏幕上展现的css像素宽成了1250px）物理像素（750）/设备独立像素（1250）=0.5 （DPR）也就是缩放0.3对应改变了DPR是吗 DPR随着页面缩放从2改变到了0.5是这个意思吗

2018-05-30 15:27:25
提问者 hy_wang #2

也就是viewport的缩放和 width值都会影响理想视口的大小他俩同时存在的话他俩一起决定理想视口的大小，哪个值得到的理想视口大就取哪个是吗

2018-05-30 15:30:39

好帮手慕糖 2018-05-30 11:45:31

物理像素可以理解为手机的屏幕的像素，实际显示效果还与缩放比有关，如下，iPhone6，是375 x 667，初始化缩放设置为0.3的话，那么宽就是375/0.3 = 1250，可以结合下图来理解下。

祝学习愉快~

收起回答

提问者 hy_wang #1

老师iphone的屏幕分辨率就是750 1334对吧，然后现在iphone6的设备宽度为什么是375我不懂。设备宽度不就是物理像素吗？苹果6屏幕宽的分辨率是750也就是屏幕实际物理像素750没错吧。老师说的375不应该是设备独立像素吗。为什么设备像素是375？设备像素等于物理像素。我实在是搞不懂

2018-05-30 12:02:11