layoutviewport、visualviewport 和 idealviewport的区别是什么

layoutviewport、visualviewport 和 idealviewport 的区别是什么

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

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

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

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

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » layoutviewport、visualviewport 和 idealviewport的区别是什么

发表回复