这里没听懂,麻烦老师解释一下

这里没听懂,麻烦老师解释一下

if (maxWidth&&(viewWidth/dpr>maxWidth)) {

viewWidth = maxWidth *dpr;

}else if (minWidth&&(viewWidth/dpr<minWidth)) {

viewWidth = minWidth *dpr;

}


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
好帮手慕夭夭 2020-07-03 19:06:12

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

好帮手慕夭夭 2020-07-03 18:55:15

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

http://img1.sycdn.imooc.com//climg/5eff0e75098a967307730825.jpg

祝学习愉快~

  • 提问者 ZZZZZzn #1
    老师,我刚刚试了一下,我可以把视口的宽拉很长,但是他最多显示1080,这就是我们设置viewwidth最大的值,是吗?
    2020-07-03 18:57:15
好帮手慕夭夭 2020-07-03 16:48:40

同学你好,具体参考如下:

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

http://img1.sycdn.imooc.com//climg/5efeea58097e746205530591.jpg


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

http://img1.sycdn.imooc.com//climg/5efeeb6109f6f5b300000000.jpg

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

http://img1.sycdn.imooc.com//climg/5efeebb309e21d2c06950093.jpg

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

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

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

http://img1.sycdn.imooc.com//climg/5efeee1d094f67d205050135.jpg

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

http://img1.sycdn.imooc.com//climg/5efeee58097a5ed801620054.jpg

http://img1.sycdn.imooc.com//climg/5efeeeb609ff1c9109520224.jpg


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

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

  • 提问者 ZZZZZzn #1
    大体能了解了,那么视口到底是什么
    2020-07-03 17:26:30
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师