一些关于视口的问题
对于视口讲得东西有很多疑惑，加上之前助教老师给的一些资料，还有自己也找了一些PPK讲的一些资料，发现资料很少，而且讲的有些地方是不一样的，这让我更加疑惑。自己领悟能力有限，需要老师帮忙解答一下下面的问题，希望能够解释背后的逻辑，而不是简单说一个公式：
1.为什么width=device-width就能叫做理想视口？
2.理想视口是不是设备上预设的一个值？ 我看一篇文章说iphone3和iphone4的分辨率虽然不一样，但是设备独立像素都是320*480，这个设备独立像素是不是就是我们所说的理想视口？
3.device-width这个值是不是谷歌浏览器——开发者模式——移动调试工具上面显示的值？
4.为什么说缩小会造成视觉视口变大，而放大又会造成视觉视口变小呢？ 我理解了CSS像素体积发生了变化，但是视觉视口不是透过手机看到的那一片区域吗？他不应该是固定的吗？
5.布局视口默认是980px，那为什么网页内容超过了980px，手机浏览的时候却没有出现滚动条，还是等比缩放了？而且获取document.documentElement.clientWidth还是980px
6.为什么initial为2的时候，html元素（布局视口）变成了187.5px了？
谢谢
正在回答
同学你好，关于同学的问题回答如下：
1、device-width是设备屏幕宽度，就是理想视口宽度。由手机厂商根据手机分辨率和自定义DPR算出，在手机出厂里就设置好的。设置width=device-width设定手机显示的页面宽度刚好视口的宽度。这个是固定的，我们一般都会这样设置。
2、是的，设备屏幕宽度，就是理想视口宽度。理想视口的值其实就是屏幕分辨率的值，它对应的像素叫做设备逻辑像素。
3、dpr为1的情况下，设备独立像素等于设备物理像素，如果不自己调整的话，调试窗口的就是设备宽度也就是设备独立像素，比如iphone6下：
4、视觉视口和缩放比例的关系为：当前缩放值 = 理想视口宽度 / 视觉视口宽度，由于理想视口宽度是不会发生变化的，所以当缩放值变大时，视觉视口宽度就会变小。
5、视频老师说的时候，还没有对视口进行设置，页面会先显示在一个980px的视口中，然后等比例缩放到365px里面，此时的视口还是980，视口宽并不等于屏幕宽，所以html的宽度就是980px。
6、initial-scale缩放大小不会改变布局视口大小，但是视觉视口大小会改变值设置1 ，就是没有缩放，值设置为2，页面就是原来的2倍，值设置0.5，就是缩小了一倍，依次类推.....。但是这种缩放只是视觉上的缩放，好比拿一个放大镜或者缩小镜看物体，物体本身大小是不会变的，只不过在镜子下，从视觉上感觉物体变大或者缩小了。页面宽度为375px，initial-scale设置为2，那么在设备中看到的宽度就是375/2=187，但是页面宽度375px并不会改变。
7、有关设备的这些概念比较抽象，理解起来不是那么容易。如果同学实在不能理解，可以先放一放，不用着急。实际开发中以及后续的项目中，很少涉及到，直接设置width=device-width, initial-scale=1.0即可。后面有时间再来回顾。因为对这一块理解起来比较乱的话，越想会越乱。
祝学习愉快~
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星