0
点赞
收藏
分享

微信扫一扫

有关viewport的一二三

前端王祖蓝 2021-09-30 阅读 60

一、背景

通俗来讲,css中的1px对应电脑屏幕的1个物理像素,那么css中的像素就是屏幕的物理像素吗?这只是一个错觉,而实际上css中的px可以理解为一个抽象单位,在不同设备中,css的1px表示的物理像素是不一样的,特别是在移动设备上。

为什么css的px不代表物理像素呢?

理由一:在window对象中,存在这样一个属性(设备像素比例),devicePixelRatio=物理像素 / 独立像素,定义为:设备物理像素和独立像素的比值。例如,iphone手机屏幕上,devicePixelRatio=2,那么css中的1px也就是独立像素,表示两个物理像素;
理由二:页面的缩放会导致css中的px变化,当用户将移动端页面放大一倍,css中的1px所代表的物理像素也会放大一倍。

二、viewport

1. layout viewport
a. 前因

理论上,在pc端浏览器所显示的页面,在移动端的浏览器上都应该正常显示;
但是,将viewport作为浏览器的可视区域,移动端屏幕是不够宽的,网页的布局必然会乱掉;
就算是现在的手机分辨率都很高了,但是屏幕尺寸是没有变大很多的,那么屏幕密度就变大了,意味着css的1px代表更多的物理像素,这会导致css中1px的元素在移动端页面看起来很小很小。

b. 后果

默认情况下浏览器把viewport设为一个较宽的值,通常是980px,pc端的网页就能在移动端正常显示了,把这个默认的viewport叫做layout viewportlayout viewport就是网页的全部内容。
layout viewport的宽度可以通过document.documentElement.clientWidth获取。

2. visual viewport

既然有了默认的viewport(也就是前面提到的layout viewport),layout viewport的宽度会大于浏览器的可视区域宽度,那么就应该有一个代表可视区域的宽度,把这个可视区域的viewport叫做visual viewportvisual viewport是用户能看到的内容窗口,可以缩放和滚动。
visual viewport的宽度可以通过window.innerWidth来获取。

3. ideal viewport

虽然有了layout viewportvisual viewport,但浏览器觉得这是不够的,想要在任何分辨率的屏幕下,不需要用户手动缩放、手动滚动,就可以完美的展示页面;
把移动设备的理想viewport叫做ideal viewport,无论在什么样的设备上,都能匹配出完美、合适的文字大小以及图片大小。
所有的iphone的ideal viewport宽度都是320px。

三、meta标签

1. meta标签的作用:
  • meta里的数据告诉浏览器如何解析页面;
  • 可以发送数据到http请求的headers里面。
2. 如何利用meta来得到一个理想的viewport
  • meta标签可以用来设置viewport,移动端的viewport默认是layout viewport,利用meta标签来实现ideal viewport的效果;
  • meta viewport常用属性:
属性名 作用
width 设置layout viewport 的宽度,为一个正整数,可以用字符串”device-width”表示设备宽度
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置layout viewport 的高度,很少使用,因为会随着width属性自动调整
user-scalable 是否允许用户进行缩放,值为”no”或”yes”, no 代表不允许,yes代表允许
  • 目前被认为最有效写法是:<meta name="viewport" content="width=device-width, initial-scale=1">,分析:
    1. 想要得到ideal viewport,首先想到是的屏幕宽度设置,把默认的layout viewport宽度设为移动设备的宽度,即<meta name="viewport" content="width=device-width">,就能把当前viewport的宽度变为理想的ideal viewport宽度。但这样做有一个缺陷,在iphone或者ipad上,不管当屏幕变为横屏还是者竖屏时,宽度都是即定的竖屏时ideal viewport的宽度;
    2. 其实以上效果这样写也行:<meta name="viewport" content="initial-scale=1">initial-scale=1设置页面初始大小为原始页面大小。需要确认一件事,缩放是相对于ideal viewport来进行缩放的,效果也就等同于content="width=device-width"。这样写的缺陷是windows phone 上的IE,不管当屏幕变为横屏还是者竖屏时,宽度都是即定的竖屏时ideal viewport的宽度。
    3. 综上得到最终方案:<meta name="viewport" content="width=device-width, initial-scale=1">initial-scale=1可以iphone、ipad上的缺陷,width=device-width可以解决IE上的缺陷。
<meta name="viewport" content="width=device-width, initial-scale=1">
举报

相关推荐

0 条评论