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

简单来说
<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: 理想视口,完美适配移动设备的视口。
完美适配是指:

  1. 不需要用户缩放和横向滚动条就能正常的查看网站的所有内容。
  2. 显示的文字的大小是合适,比如一段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.csdn.net/u012402190/article/details/70172371

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值