这里没听懂,麻烦老师解释一下
if (maxWidth&&(viewWidth/dpr>maxWidth)) {
viewWidth = maxWidth *dpr;
}else if (minWidth&&(viewWidth/dpr<minWidth)) {
viewWidth = minWidth *dpr;
}
正在回答 回答被采纳积分+1
同学你好,具体参考如下:
页面缩的太小和太大肯定都不好,会影响显示的效果。所以我们要给它设定一个极限,即限制视口的最大宽度和最小宽度。(如下是课程中演示,缩放视口的宽度)
课程中定义了最大宽度和最小宽度,然后再判断视口的宽度是否超出了我们的限定。
判断中使用了逻辑与,是一个短路操作。也就是说,当没有定义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同理,这里老师就不重复了。这一块视频中讲解的很详细,建议同学多看几遍视频,帮助自己更好理解。
如果我的回答帮助到了你,欢迎采纳,祝学习愉快~
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星