移动端布局(二)关于视口

关注

转载 2022-02-13 11:23:13 1.5k 阅读 AI 写同款· GEO 优化 ›

前端面试题 - width=device-width以及1rem、1em的含义？比如说，一个电脑显示器的参数中，最佳分辨率是1920x1080，那么指的就是这个显示器在屏幕上用于显示的实际像素点，也就是设备像素。css像素是指网页布局和样式定义所使用的像素，也就是说，css代码中的px，对应的就是css像素。在表示某一数目的css像素时，在放大状态下使用了更多的设备像素，而在缩小状态下使用了更少的设备像素。这其中有一句width=device-width，它的意思是，把手机浏览器的布局视口的宽度，更改为当前设备的宽度，也就是等于可见视口。桌面电脑中的视口，就是这样的一个概念。阅读详情

简单来说
<meta name="viewport" content="width=device-width,initial-scale=1.0">的解释

content属性值:

width:可视区域的宽度，值可为数字或关键词device-width

height: layout viewport 的高度，这个属性对我们并不重要，很少使用

intial-scale: 页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放

可视区域的缩放级别:
maximum-scale=1.0, 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale=1.0; 允许用户的最小缩放值，为一个数字，可以带小数

maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。

user-scalable:是否可对页面进行缩放，no 禁止缩放、yes允许。

复杂的说：
在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。

一、viewport的概念
通俗讲: 移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。

具体讲: 就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。

viewport不一定要和可视区一样大，可以比浏览器的可视区域要大，也可以比浏览器的可视区域要小。

默认情况: 是比可视区要大的，因为考虑到桌面浏览器上的网站也能在移动端上正常显示，移动端一般会默认设置视口为980px和1024px(这个由设备自己决定),但带来的后果是出现横向滚动条。

ps: 一般来说移动端的分辨率是比pc端的分辨率要小的。

下图是默认viewport的宽度:
在这里插入图片描述

二、css中的1px并不等于设备的1px
在桌面浏览器中:1css px是等于1物理px的。但在移动端中并不是，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。

在早期移动设备普通屏中，只有物理像素，没有独立像素，在不缩放的情况下，1个css像素就是1个物理像素，比如iphone3手机屏幕是320 * 480px的分辨率，那么width等于320px的元素是占满整个屏幕的。从iphone4开始苹果公司推出了高清屏，分辨率变成640 * 960px，也就是普通屏一个元素有高清屏两个像素那么大，因为相同尺寸的屏幕要放满640 * 960px的像素，只能是将像素缩小2倍，如果还按照1物理像素就是1个css像素来渲染图像，那么width等于320px的元素只会占据屏幕宽度的一半，如何让iphone4和iphone3显示相同呢? 在开发中为了让不同设备上有一样的显示效果，就引入了独立像素，让网页中css像素成为独立像素，在iphone3中不变1个css像素就是1个物理像素，但是在iphone4上，在不缩放的前提下，1个css像素等于2个物理像素，这样css中width等于320px的元素也就是640个物理像素，正好占满iphone4的宽度， font-size: 20px; 的字体在 iphone3 和 iphone4 上的尺寸也相同，只不过在 iphone4 上的字体更清楚。
在iphone4上dpr是2,但不是所有设备的dpr都是2

还有一个因素会引起css中px的变化，那就是用户缩放。例如当用户把页面放大一倍，css像素不会变，但是css中1px所代表的物理像素也会增加一倍，反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。

window.devicePixelRatio属性表示设备像素和物理像素的比例,dpr=物理像素/独立像素,表示一个css像素等于多少个物理像素。

三、PPK的关于三个viewport的理论
ppk认为，移动端有三个viewport:
layout viweport: 布局视口，用来显示网页，决定了网页怎么布局，为了让移动端能正常显示pc端网站，如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱被挤成一团，所以浏览器默认把viewport设置为一个较宽的视口，如980等，这个视口就是布局视口。dom可以通过document.documentElement.clientWidth 来获取。

ps: 这里要注明一点，html元素的width和height百分比就是相对于布局视口计算的，为什么默认980?，因为在以前的页面都是980px，所以默认宽度为980px，但是现在的页面它允许你可以超出布局视口的宽度，比如你可以把元素的宽度设置的比默认的布局视口都要大。

visual viewport: 视觉视口，代表用户可以看到页面的区域。js通过window.innerWidth获取。在Android 2, Oprea mini 和 UC 8中无法正确获取。

默认情况下，也就是没有设置meta的情况下，为了能让用户完整看到网页，视觉视口的宽度会和你整个网页的宽度一样大，也就是你网页的总宽度多大，视觉视口就多大，但是布局视口是不变的。
比如在iPhone5，我的布局是980(固定死的) ,我的网页的总宽度是1094px(网页可以超过布局视口)，视觉视口就是1094px。

在这里插入图片描述
idea viewport: 理想视口，完美适配移动设备的视口。
完美适配是指:

不需要用户缩放和横向滚动条就能正常的查看网站的所有内容。
显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。

总结: 完美适配，也就是说不管任何的移动设备分辨率中显示同一个元素时，显示的都是一样或差不多大小，ideal viewport的宽度等于移动设备的屏幕宽度只，要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px)，那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。

ideal viewport没有一个固定的尺寸，不同的设备拥有有不同的ideal viewport所有的iphone的ideal viewport宽度都是320px，无论它的屏幕宽度是320还是640，也就是说，在iphone中，css中的320px就代表iphone屏幕的宽度。
在这里插入图片描述
四、利用meta标签对viewport进行控制
我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：

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

该meta标签的作用：
让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。

五、把当前的viewport宽度设置为 ideal viewport 的宽度
就是把默认的layout viewport设为移动端屏幕宽度因为meta viewport中的width能控制layout viewport的宽度，所以我们只需要把width设为width-device这个特殊的值就行了。

<meta name="viewport" content="width=device-width">

下图是这句代码在各大移动端浏览器上的测试结果：
在这里插入图片描述
这句代码和上面一样也能变为idea viewport:

<meta name="viewport" content="initial-scale=1">

这句代码的作用只是不对当前的页面进行缩放，scale缩放是相对于 ideal viewport来进行缩放的，当对ideal viewport进行100%的缩放，也就是缩放值为1的时候，不就得到了 ideal viewport吗

下图是各大移动端的浏览器当设置了后是否能把当前的viewport宽度变成 ideal viewport 的宽度的测试结果：
在这里插入图片描述
兼容性问题:根据上面的兼容图
content=“width=device-width” 其它浏览器都设置正常，但是在iphone和ipad上，无论是竖屏还是横屏，宽度都是竖屏时ideal viewport的宽度。

content=“initial-scale=1” 其它浏览器都设置正常，其它浏览器在windows phone 上的IE 无论是竖屏还是横屏都把宽度设为竖屏时ideal viewport的宽度。

由于以上问题:我们决定把width=device-width, initial-scale=1一起写上去。

<meta name="viewport" content="width=device-width, initial-scale=1">

但如果width(固定值) 和 initial-scale=1同时出现，并且还出现了冲突呢?

<meta name="viewport" content="width=400, initial-scale=1">

width=400表示把当前viewport的宽度设为400px，initial-scale=1则表示把当前viewport的宽度设为ideal viewport的宽度,浏览器用谁的呢?
取最大值，例如，当width=400，ideal viewport的宽度为320时，取的是400。

ps:在uc9浏览器中，当initial-scale=1时，无论width属性的值为多少，此时viewport的宽度永远都是ideal viewport的宽度。

六、关于meta viewport的更多知识
1、关于缩放以及initial-scale的默认值
前面提到过，缩放是相对于ideal viewport来缩放的，缩放值越大，当前viewport的宽度就会越小，反之亦然。
如: iphone中物理像素是320px，idea viewport是320px，如果设置了inital-scale=2，此时viewport = 160px。很好理解，原来设备像素和独立像素比为1:1，现在是1:2。当你放大2倍后1css像素等于2个物理像素，所以160px就是320个物理像素，160px能占满整个屏幕宽度。

因此我们得出一个公式:
visual viewport宽度 = ideal viewport宽度 / 当前缩放值
当前缩放值 = ideal viewport宽度 / visual viewport宽度
ps: visual viewport的宽度指的是浏览器可视区域的宽度。

大多数浏览器都符合这个理论，但是安卓原生浏览器以及ie有问题
安卓自带的webkit浏览器只有在 initial-scale = 1 以及没有设置width属性时才是表现正常的，也就相当于这理论在它身上基本没用；而IE则根本不甩initial-scale这个属性，无论你给他设置什么，initial-scale表现出来的效果永远是1。

initial-scale默认值:就是不写该属性时，inital-scale是多少，肯定不是1，因为1表示layout设置为idea viewport的宽度，浏览器默认的 layout viewport宽度一般都是980啊，1024啊，800啊等等这些个值，没有一开始就是 ideal viewport的宽度的。安卓设备上的initial-scale默认值好像没有方法能够得到，或者就是干脆它就没有默认值。

iphone和ipad上的initial-scale默认值:
在iphone和ipad上，无论你给viewport设的宽的是多少，如果没有指定默认的缩放值，则iphone和ipad会自动计算这个缩放值，以达到当前页面不会出现横向滚动条等于可视区域的目的。

例如:layout viewport的宽度为980px，但我们可以看到浏览器并没有出现横向滚动条，浏览器默认的把页面缩小了，根据上面的公式:当前缩放值 = ideal viewport宽度 / visual viewport宽度，我们可以得出：
当前缩放值 = 320 / 980
也就是当前的initial-scale默认值应该是 0.33这样子。

关于这点:我觉得说的不对，因为会不会出现滚动条最后是要看物理像素，也就是看dpr值，而不是initial-scale，因为initial-scale是基于独立像素来缩放,比如就上面0.33是基于理想视口逻辑尺寸计算也就是980的css像素，最后980要转换成物理像素来渲染。所以我认为默认情况下会计算dpr值以使页面不会出现滚动条，也就是dpr = 640(物理像素)/980= 0.65。也就是0.65个物理像素由1个css像素来渲染,980个css像素才会正好占满屏幕一行并且不会出现滚动条。置于window.devicePixelRatio属性在移动端上永远获取的是理想视口的dpr值不是缩放的dpr值。
在这里插入图片描述
2、动态改变meta viewport标签
第一种:

document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')

第二种：

<meta id="testViewport" name="viewport" content="width = 380">
<script>
var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');
</script>

三个视口的总结:
layout viewport: 就是用来显示网页的视口，网页的内容可以超出布局视口
visual viewport: 就是用来浏览网页的一个窗口，和浏览器窗口的width是一样的。
idea viewport:一个元素不管在任何设备分辨率中显示的都一样大，就是将我们的layout viewport设置为idea viewport。
不知道这样理解对吗

本文转载自:https://blog.youkuaiyun.com/u012402190/article/details/70172371

收录于