当前位置:首页 » 六六互联 » 正文

在 PC 端,视口指的是浏览器的可视区域

1009 人参与  2022年12月28日 14:44  分类 : 六六互联  评论

视口

在 PC 端,视口指的是浏览器的可视区域

PC 端,视口指的是浏览器可视区域,其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中,视口也被称为初始包含块,它是所有 CSS 百分比宽度推算的根源,给 CSS 布局限制了一个最大宽度。而移动端则较为复杂,它涉及到三个视口:布局视口(LayoutViewport)、视觉视口(Visual Viewport)和理想视口(Ideal Viewport)。本文主要讨论移动端中的视口。


1.布局视口(layout viewport


一般移动设备的浏览器都默认设置了一个 viewport 元标签,定义一个虚拟的布局视口(layout viewport),用于解决早期的页面在手机上显示的问题。iOS, Android 基本都将这个视口分辨率设置为 980px,所以 PC 上的网页基本能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页。


移动端浏览器厂商为了保证页面可以展示的很好,他们将视口的宽度设计得比屏幕宽度宽出很多。这样。在移动端,视口与移动端浏览器屏幕宽度就不再关联,而是完全独立的了。我们称它为布局视口。CSS布局会根据它来计算并被约束。


2.视觉视口(visual viewport)


视觉视口是用户当前看到的区域,如图6-37所示,用户可以通过缩放操作视觉视口,同时不会影响布局视口。所以,当用户放大时,视觉视口将会变小,CSS 像素将跨越更多的物理像素。


视觉视口和缩放比例的关系为:当前缩放值 = 理想视口宽度  / 视觉视口宽度


3.理想视口(ideal viewport)


布局视口的默认宽度并不是一个理想的宽度,于是 Apple 和其他浏览器厂商引入了理想视口的概念,它对设备而言是最理想的布局视口尺寸。显示在理想视口中的网站具有最理想的宽度,用户无需进行缩放。理想视口的值其实就是屏幕分辨率的值,它对应的像素叫做设备逻辑像素(device independent pixel, dip)。dip 和设备的物理像素无关,一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。如果用户没有进行缩放,那么一个CSS 像素就等于一个 dip。

 

4.移动浏览器中的视口


移动浏览器中的视口分为可见视口和布局视口。由于移动浏览器的宽度限制,在有限的宽度内可见部分(可视视口)装不下所有内容(布局视口),因此在移动浏览器中通过<meta>标签引入viewport属性,处理可见视口与布局视口的关系.


来源:服务器,转载请保留出处和链接!

本文链接:http://www.cau168.com/post/152.html

抗投诉服务器
PC 端  可视区域  

六六互联长期出售外贸服务器

<< 上一篇 下一篇 >>

六六互联

服务器 | 主机

Copyright 六六互联.Some Rights Reserved.www.ic.vip