移动H5的meta视口标签、弹性布局原则和背景图片适配

上一篇25学堂跟大家分享了web APP页面适配方案:淘宝H5与网易H5页面对比H5页面适配所有iPhone和安卓机型的六个技巧

很多小伙伴对viewport的理解不是很透彻,于是这一篇重点聊聊viewport(视图)的知识点。以帮助大家更加容易理解移动端H5页面的适配方案。

让H5适配所有的移动设备

 

解读移动H5适配最重要的html标签:meta视口标签

meta视口标签是是设置理想视口的重要元素,主要用于将布局视口的尺寸和理想视口的尺寸相匹配。meta视口标签存在5个指令:

width:设置布局视口的宽度,一般设为device-width。

initial-scale:初始缩放比例。1即100%,2即200%,以此类推

maximum=scale:最大缩放比例。

minimum-scale:最小缩放比例。

user-scalable:是否静止用户进行缩放,默认为no。

 

需要注意的是,缩放是根据理想视口进行计算的。缩放程度与视觉视口的宽度是逆相关的。也就是说,当你将屏幕放到到2倍时,视觉视口为理想视口的一半,此时每单位的CSS像素等于2个设备像素。缩小时则相反。

 

 

1、布局视口(layout viewport)

可以看作是html元素的上一级容器即顶级容器,默认情况或者将html元素的width属性设为100%时,会占满这个顶级容器,此时用

document.documentElement.clientWidth 

获取到html元素的布局宽度也就是布局视口的宽度,使用媒体查询时 max-width 和 min-width 的值指的也是布局视口的宽

2、布局视口的宽度和高度单位是像素px,

这个单位是CSS和JS中使用的抽象单位,为了便于区分称作CSS像素。布局视口的宽度有一个默认值,一般在 768px ~ 1024px 之间,最常见的宽度是 980px,在这个默认值下进行布局得到的页面比较接近PC端布局的效果。

3、可视视口(visual viewport)

是指用户可见页面区域,其宽度值为横向可见CSS像素数,从另一个角度理解,可视视口的宽度决定了将屏幕横向分为多少份,每份对应一个CSS像素,使用window.innerWidth   可以获取到可视视口的宽度

4、理想视口(ideal viewport)

是一个比较适合页面布局使用的视口尺寸,作为计算布局视口和可视视口尺寸时的一个基准值,下面代码中 device-width 的值就是理想视口的宽度

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

使用screen.width,也可以获取到理想视口的宽度

5、三个视口中,只有理想视口的尺寸是不能改变的

由设备和浏览器决定,与设备的物理像素数存在着比例关系,这个比例就是设备像素比(device pixel ratio, dpr),即有 设备像素比 = 物理像素数 / 理想视口尺寸,举例iphone5屏幕横向有640个物理像素,其理想视口宽为320,则 dpr=2,可以使用window.devicePixelRatio获得dpr,但在安卓系统下这个值可能不符合预期。

6、可视视口的尺寸收到缩放比例的影响

因此用户手动缩放和在 meta 标签中设置 initial-scale 的值都会改变可视视口的尺寸,可视视口的尺寸越小即显示的CSS像素数越少,则单位CSS像素对应的可使区域越大,对应的缩放比也就越大。

缩放比例是相对于理想视口而言的,即有 缩放比例 = 理想视口尺寸 / 可视视口尺寸。

对iphone5,设置<meta name="viewport" content="initial-scale=0.5">

则其可视视口尺寸为640个CSS像素

缩放比例也有默认的值,没有设置 initial-scale 时,浏览器会取适当的缩放比例使 布局视口正好铺满屏幕即有 布局视口尺寸 = 可视视口尺寸

7、布局视口的宽度受到 meta 标签中的 width 和 initial-scale 的影响

仅设置 width 的值时,这个值就是布局视口的宽度,width的值可以为正整数或特殊值 device-width

<meta name="viewport" content="width=400">

此时由于没有禁用缩放,一般可以通过双击屏幕对页面进行缩放,但手动缩放不会影响布局适口的尺寸,只会影响到可视视口的尺寸,而且可能导致布局视口小于可视视口

设置 initial-scale 的值时,布局视口的尺寸与可视视口的计算方式相同,但不受手动缩放的影响,同时设置 width 和 intial-scale 的值时,布局视口的宽取上述两个值中较大的一个。

8、布局视口宽 = 可视视口宽时

html 元素正好横向铺满窗口(但其后代元素若有横向 overflow 的情况,仍然会出现滚动条),布局视口宽 > 可视视口宽时,出现横向滚动条。

9、弹性布局的开发原则

web app是一种典型的弹性布局:关键元素高宽和位置都不变,只有容器元素在做伸缩变换。对于这类app,记住一个开发原则就好:文字流式,控件弹性,图片等比缩放。以图描述:

1444873733454

这个规则是一套基本的适配规则,对于这种简单app来说已经足够,同时它也是后面要说的rem布局的基础。

10、移动端背景图片 适配的三种方法

(1)、响应式布局

简而言之,就是页面元素的位置随着屏幕尺寸的变化而变化,通常会用百分比来定位,而在设计上需要预留一些可被“压缩”的空间。

(2)、Cover布局

就跟background-size的cover属性一样,保持页面的宽高比,取宽或高之中的较小者占满屏幕,超出的内容会被隐藏。此布局适用于主要内容集中在中部,边沿无重要内容的设计。

 (3)、Contain布局

同样,也跟background-size的contain属性那样,保持页面的宽高比,取宽或高之中的较大者占满屏幕,不足的部分会用背景填充。个人比较推荐用这种方式,但在设计上需要背景为单色,或者是可平铺的背景。

 

 

 

由上述规则可以得到一些有用的结论:

1、将 meta 标签中的 width 设为 device-width 同时禁用手动缩放可以使 布局视口尺寸 = 可视视口尺寸 = 理想视口尺寸,此时 设备像素比 = 物理像素数 / 理想视口尺寸 = 物理像素数 / 布局视口尺寸,对iphone5,一个CSS像素对应4个物理像素

2、为 initial-scale 设置任意合法的值同时禁用手动缩放就可以使布局视口尺寸 = 可视视口尺寸

3、将 initial-scale 设置为 1 也可以使 布局视口尺寸 = 可视视口尺寸 = 理想视口尺寸

每天更新,
全站高品质素材免费下载!