93、Viewport详解

最新推荐文章于 2024-05-17 09:40:17 发布

C.&H.

最新推荐文章于 2024-05-17 09:40:17 发布

阅读量3.7k

点赞数 5

分类专栏：前端面试题目

本文链接：https://blog.csdn.net/sunnnnh/article/details/119385071

版权

前端面试题目专栏收录该内容

136 篇文章 39 订阅

订阅专栏

一、viewport概念

（1）移动端的viewport：

就是设备的屏幕上用来显示我们的网页的那一块区域；
viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大（浏览器会出现横向滚动条），也可能比浏览器的可视区域要小。

（2）css中的1px并不是代表屏幕上的1px ：

分辨率越大（物理像素），css中1px代表的物理像素就会越多（css像素是viewport的一个小方格）；
手机屏幕的分辨率已经越来越高（物理像素），但屏幕尺寸却没有发生太大变化，必须让css中的1px代表更多的物理像素，才能让1px的东西在屏幕上的大小与那些低分辨率的设备差不多。

（3）物理像素和逻辑像素（清晰易懂）：
https://blog.csdn.net/zhouziyu2011/article/details/70176511

（4）布局视口layout viewport：

layout viewport 是网页的所有内容，他可以全部或者部分展示给用户。

layout viewport

（5）理想视口 ideal viewport:

理想视口是与设备相关的，是布局视口的一个理想尺寸，只有当布局视口的尺寸等于设备屏幕的尺寸时，才是理想视口，此时文档对象宽度与屏幕宽度相同。
移动设备一般具有固定的DPR，即在缩放100%时，用多少个物理像素显示一个逻辑像素，在Web开发中就是用多少个物理像素去显示一个CSS像素。

理想视口宽度 = 移动设备横向分辨率 / DPR

//获取理想视口宽度
window.screen.width

å¨è¿éæå¥å¾çæè¿°

（6）视觉视口visual viewport

visual viewport 就是当前显示给用户内容的窗口，你可以拖动或者放大缩小网页。
用户可以通过缩放来查看网站的内容。如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也变大了；用户放大网站，我们能看到的网站区域将缩小，此时视觉视口也变小了。不管用户如何缩放，都不会影响到布局视口的宽度。
视觉视口的宽度 = 理想视口宽度 / 缩放比例

visual viewport

二、viewport具体用法

移动设备的默认布局视口往往大于理想视口，此时就会在横向出现滚动条才能完整的容纳页面。我们需要的是将页面的布局视口设置为理想视口，这就轮到meta标签出场了。该meta标签的作用是让layout viewport的宽度等于设备的宽度，同时控制是否允许用户手动缩放。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

6个属性值含义：

width：控制viewport的宽度，这个值可以被指定，例如：500px。亦或者是“device-width”，意思是设置视口宽度为设备宽度。
height：控制viewport的高度。height=device-height
initial-scale：初始缩放比例，即每一次加载时页面缩放的比例。
maximum-scale：允许用户缩放到的最大缩放比例。
minimum-scale：允许用户缩放到的最小缩放比例。
user-scaleable：是否允许用户缩放，可以传“yes”或“no”

（1）initial-scale属性

initial-scale属性用于设置页面初始的缩放比例，缩放比例为理想视口与视觉视口的比值。

即：scale = 理想视口idealViewport / 视觉视口visualViewport

当只指定initial-scale属性，而不设置width属性时，浏览器会将布局视口宽度设置为视觉视口宽度，以将页面正好铺满屏幕。
当指定initial-scale = 1，而不设置width属性时，大部分浏览器会将布局视口宽度设置为设备理想视口宽度

因为 initial-scale = 1
所以 视觉视口 = 理想视口 ÷ 1.0 = 理想视口
又因为 没有设置width
所以 视觉视口 = 布局视口
所以 视觉视口 = 布局视口 = 理想视口

❗ 当设置initial-scale=1且同时设置width属性时，如果由理想视口除以 inital-scale计算得到的视觉视大于width，则width会被浏览器重置为视觉视口。（如果计算得到的视觉视口小于布局视口，就不会出现问题，只是会出现滚动条）原因是 👇

如果视觉视口大于布局视口，就存在逻辑上的问题。

比如说，我iphone8设备理想视口为375px，页面init-scale设置为0.75，那么视觉视口等于375/0.75 = 500px，若width设置为375或device-width，也就是出现了视觉视口大于布局视口的情况。

那浏览器就纳闷了，你要让我显示500px范围宽的页面，但你告诉我页面实际上只有375px宽，不是奇了怪了吗？所以当视觉视口大于布局视口时，布局视口宽度width会被重置成视觉视口宽度，这应该是浏览器的策略，用于避免显示上的逻辑问题。

（2）下面我们来看看移动端布局具体的代码：

<head>
<title>Test Page</title>
<script>
	var deviceWidth = parseInt(window.screen.width);  //获取当前设备的屏幕宽度
	var deviceScale = deviceWidth / 640;  //得到当前设备屏幕与640之间的比例，之后我们就可以将网页宽度固定为640px
	var ua = navigator.userAgent;
	//获取当前设备类型（安卓或苹果）
	if (/Android (\d+\.\d+)/.test(ua)) {
	    var version = parseFloat(RegExp.$1);
	    if (version > 2.3) {
	        document.write('<meta name="viewport" content="width=640,initial-scale=' + deviceScale + ', minimum-scale = ' + deviceScale + ', maximum-scale = ' + deviceScale + ', target-densitydpi=device-dpi">');
	    } else {
	        document.write('<meta name="viewport" content="width=640,initial-scale=0.75,maximum-scale=0.75,minimum-scale=0.75,target-densitydpi=device-dpi" />');
	    }
	} else {
	    document.write('<meta name="viewport" content="width=640, user-scalable=no">');
	}
</script>
</head>

C.&H.

关注

5
点赞
踩
37

收藏

觉得还不错? 一键收藏
1
评论
93、Viewport详解

一、viewport概念（1）移动端的viewport：就是设备的屏幕上用来显示我们的网页的那一块区域； viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大（浏览器会出现横向滚动条），也可能比浏览器的可视区域要小。（2）css中的1px并不是代表屏幕上的1px ：分辨率越大（物理像素），css中1px代表的物理像素就会越多（css像素是viewport的一个小方格）；手机屏幕的分辨率已经越来越高（物理像素），但屏幕尺寸却没有发生太大变化，必须让css中的1px代
复制链接

扫一扫