layoutviewport、visualviewport 和 idealviewport的区别是什么

layoutviewport、visualviewport 和 idealviewport 的区别是什么

移动端一共需要理解三个viewport的概念的理解。

第一个视口是布局视口,在移动端显示网页时,由于移动端的屏幕尺寸比较小,如果网页使用移动端的屏幕尺寸进行布局的话,那么整
个页面的布局都会显示错乱。所以移动端浏览器提供了一个layoutviewport布局视口的概念,使用这个视口来对页面进行布局展
示,一般layoutviewport的大小为980px,因此页面布局不会有太大的变化,我们可以通过拖动和缩放来查看到这个页面。

第二个视口指的是视觉视口,visualviewport指的是移动设备上我们可见的区域的视口大小,一般为屏幕的分辨率的大小。visu
alviewportlayoutviewport的关系,就像是我们通过窗户看外面的风景,视觉视口就是窗户,而外面的风景就是布局视口
中的网页内容。

第三个视口是理想视口,由于layoutviewport一般比visualviewport要大,所以想要看到整个页面必须通过拖动和缩放才
能实现。所以又提出了idealviewport的概念,idealviewport下用户不用缩放和滚动条就能够查看到整个页面,并且页面在
不同分辨率下显示的内容大小相同。idealviewport其实就是通过修改layoutviewport的大小,让它等于设备的宽度,这个
宽度可以理解为是设备独立像素,因此根据idealviewport设计的页面,在不同分辨率的屏幕下,显示应该相同。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » layoutviewport、visualviewport 和 idealviewport的区别是什么

发表评论

前端开发相关广告投放 更专业 更精准

立即查看 联系我们