麻烦老师解答一下，问题在里面

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

在这里输入代码，可通过选择【代码语言】突出显示

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--  <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">-->
    <title>Document</title>
</head>
<body>

</body>
</html>
注释掉viewport标签后 在chrome控制台iPhone6的屏幕下
直接打印innerWidth，结果输出的值是980，这个值是浏览器约定
的值吗？iPhone6的dpr默认值是2，那么也就是说在iPhone6设备上
缩放了原来的1/2，iPhone6的物理像素widh是375，视口宽度变为750，
那么此时注释掉viewport后，window.innerWidth不是应该是 750吗？
怎么会是980？？？

大白前端 2020-10-28

源自：移动端屏幕适配 3-2 通用适配实现

收起

3回答

好帮手慕码回答被采纳获得+3积分 2020-10-29 14:48:11

同学你好，解答如下：

1、是视觉上觉得粗了。简单理解就是同样大小的区域里，高清屏可以成像的像素点更多，那么高清屏就会更清晰一点。由于视觉的误差，看的更清晰的黑色感觉会更粗一点哦，就像我们看一棵树，远看会很小，近看就很大一样的道理。

2、清晰度不会模糊的，而是看起来会更细（模糊和细概念不一样哦）。

（1）设计稿上border宽度设置为1px，根据1:2比例关系，手机上就需要布局为0.5px，但是为了避免某些机型不兼容0.5px，所以还需要写成1px。

（2）为了不让1px看起来显示很粗，所以此时会缩放视口为0.5。那么目前的（缩放后）1px就表示之前（没有缩放）的一半（0.5），即：在未缩放之前，html的宽度是375px，此时物理像素点是750个，相当于1px对应2个物理像素点。缩放后，html的宽度变成了750px，此时1px对应一个1个物理像素点；但是缩放后的1px与缩放前的1px不一样，缩放后的1px相当于缩放前的1px的0.5倍，所以1px与物理像素点的比例关系没有改变，即清晰度不变，没有违背dpr=2的初衷。

祝学习愉快~

收起回答

好帮手慕码 2020-10-29 09:38:50

同学你好，非常抱歉没有纠正同学描述中的错误，这里纠正一下：750px就是iphone6的物理像素，375是手机的逻辑像素。感谢同学的指出，老师以后回答问题时候会更加谨慎。

另外，当dpr为1的时候，1px占一个物理像素；而dpr为2的时候，1px占两个物理像素。实际上，css像素（例如：1px）没有大小变化，变化的是内部的物理像素。所以dpr为3的时候，看起来会更清楚，可以参考下图：

所以，不会看起来更小的。

祝学习愉快~

收起回答

提问者大白前端 #1

也就是说一个css像素在不同dpr的屏幕下只是对应的物理像素点不一样，这也就导致了在不同的dpr屏幕下的清晰度不同，那为什么在dpr为2的屏幕下1css像素的边框会变得粗？而在dpr为1的屏幕下也就是1css像素对应1物理像素的屏幕下会显得细？按照老师的逻辑不应该是1css像素边框在不同的dpr屏幕下的边框大小是一样的，只不过是清晰度不同吗？怎么会出现粗细的问题呢？麻烦老师解释一下!!! 2. 在dpr为2 即iPhone6的屏幕下 1css像素对应两个物理像素，让一个css像素的元素有两个物理像素点来描述，即让一个css像素的元素在dpr为2的屏幕下显得更清晰，那么问题来了，同过缩放视口为0.5，也就是此时视口的宽度是750 对应iPhone6的750物理像素，即1css像素对应一个物理像素，那么原本一个css像素的元素是用两个物理像素点来对应的，现在变成了一个物理像素点来对应，那清晰度不会变的模糊吗？不是跟设计这个（dpr为2）的屏幕的初衷相违背了吗？

2020-10-29 11:34:00

好帮手慕码 2020-10-28 19:05:56

同学你好，解答如下：

1、是的。

2、在不设置viewport的情况下，移动端页面默认宽度显示为980px。所以，在注释掉viewport属性的情况下，默认显示980而不是750。

祝学习愉快~

收起回答

提问者大白前端 #1

老师怎么不纠正我一下，百度了一下，iPhone6的物理像素是750，而不是375，dpr物理像素比是2，375是开发尺寸，也就是我们设置的css像素，此时1css像素对应的是2个物理像素。感觉视频中老师没有讲详细。那个一个css像素的边框在iPhone6 dpr为2都屏幕下是两个物理像素，在dpr为3的屏幕下是一个css像素对应三个物理像素，所以要解决在不同屏幕下不一样就要改变缩放值为1/dpr。但问题又来了，视频中老师这样设置的话，那么一个css像素对应的就是1一个物理像素了，那么在手机上不就显得很小吗？因为视口宽度从375变成了750，那这样做体验不就不好了吗？开发的时候不是还要按照不缩放即scale为1来开发的吗？麻烦老师详细解释一下，谢谢！

2020-10-28 22:51:08