木灵鱼儿

木灵鱼儿

阅读:276

最后更新:2022/01/19/ 19:33:16

meta name= viewport 知识补充

网页不能直接识别移动设备的实际像素大小

再没有设置meta viewport的时候,网页只能识别硬件的物理像素,而非软件像素。

物理像素:硬件本身的实际像素大小

软件像素:设备尺寸限制,过大的像素并不能带来很好的体验,显示的内容过多反倒无法正常使用,于是有了软件像素,软件像素是基于一定像素比得到的值。

比如 iPhone X的软件像素是:375px*812px;它的比是:3;那么它的物理像素就等于:(375*3)*(812*3)

更多的对比可以去这个网站查看:mydevice

然而实际上移动端设备都会有一个默认的宽度:980px,所以,即便我们没有设置meta viewport,网页也不可能真的使用物理像素宽度。

meta viewport 标签

一般我们会设置如下内容

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

name="viewport" 表示这是一个视口配置

width=device-width 表示显示的宽度为设备宽度,也就是说需要浏览器显示为软件像素,当然也可以是正整数

initial-scale=1.0 表示网页显示的缩放比,1.0表示默认原样,一般也不会改动这个

除此以外还有一些配置:

禁止用户放大缩小网页

<meta  name="viewport"  content="user-scalable=no">

no 表示不允许放大缩小

yes 表示允许放大缩小

不设置user-scalable默认就是user-scalable=yes

限制用户放大网页的大小

<meta  name="viewport"  content="maximum-scale=2.0">

这个表示用户手动放大最大只能到2倍

限制用户缩放网页的大小

能限制最大就能限制最小

<meta  name="viewport"  content="minimum-scale=0.5">

这个表示用户手动放大最小只能到0.5倍

注意: 最大和最小会影响到initial-scale,类似于css中max-wdith、min-width、width之间的关系。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 1
文章被阅读 276

相关文章