3回答

好帮手慕夭夭

2020-07-03

同学你好，视口就是窗口的意思，就是我们视线能够看到的一个范围。例如在iPhone6下，那么视口就是老师圈出来的范围。

祝学习愉快~

1

hZZZZzn

h 老师,我刚刚试了一下，我可以把视口的宽拉很长，但是他最多显示1080，这就是我们设置viewwidth最大的值，是吗？

h020-07-03

共1条回复

好帮手慕夭夭

2020-07-03

同学你好，理解的正确哦。祝学习愉快~

0

好帮手慕夭夭

2020-07-03

同学你好，具体参考如下：

页面缩的太小和太大肯定都不好，会影响显示的效果。所以我们要给它设定一个极限，即限制视口的最大宽度和最小宽度。（如下是课程中演示，缩放视口的宽度）

课程中定义了最大宽度和最小宽度，然后再判断视口的宽度是否超出了我们的限定。

判断中使用了逻辑与，是一个短路操作。也就是说，当没有定义maxWidth时，后面的判断就不会再去执行了。如果minWidth定义了，才会继续执行后面的判断。（else if判断的逻辑表达式同理）

viewWidth/dpr是获取的页面实际的宽度，viewWidth/dpr>maxWidth意思是判断视口宽度如果超出了最大宽度，那么设置重新设置视口的宽度（viewWidth = maxWidth *dpr）。即让视口保持在最大宽度。

这里为啥会用上dpr建议同学结合视频看一下，因为meta中是给页面设置了缩放。如下：

当dpr为2时，设置的缩放为0.5。

而此时看的视口宽度是375px。即375*0.5为750px才是viewWidth 。即750px除以2（dpr）得出视口宽度375px。所以判断时要用viewWidth 除以dpr ，而设置viewWidth 要用我们限定的最大宽度乘以dpr哦。

后面的else if同理，这里老师就不重复了。这一块视频中讲解的很详细，建议同学多看几遍视频，帮助自己更好理解。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

0

hZZZZzn

h 大体能了解了，那么视口到底是什么

h020-07-03

共1条回复