一、视口
1.布局视口(layout viewport)
布局视口是指网页的宽度,一般移动端浏览器都默认设置了布局视口的宽度。
2.视觉视口(visual viewport)
视觉视口是指用户正在看到的网站的区域,这个区域的宽度等同于移动设备的浏览器窗口的宽度。
3.理想视口(ideal viewport)
理想视口是值对设备来讲最理想的视口尺寸。理想视口的宽度大小和屏幕的宽度是一致的。
在开发中,为了实现理想视口,需要给移动端页面添加标签配置视口。
4.meta视口标签
理想视口idealviewport
meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致。
meta视口标签:
属性 | 说明 |
---|---|
width | 设备宽度 |
initial-scale | 初始缩放比,大于0的数字 |
maxmum-scale | 最大缩放比,大于0的数字 |
minimum-scale | 最小缩放比,大于0的数字 |
user-scalable | 用户是否可以缩放,yes/no(1/0) |
标准的viewport设置
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximun-scale=1.0,minimum-scale=1.0,user-scale=no">
拓展
二倍图
-
在早期的手机屏幕中,css像素:物理像素=1:1。
50px*50px的图片在移动端显示,不存在变形模糊。
-
而现在的手机css像素与物理像素的比值不再为1:1,图片会被拉伸模糊。如50x50的图片在移动端可能会被拉伸成200x200。
解决方式
如有一张200x200像素的图片,我们给该图片设置以下样式:
img{
width:200px;
height:200px;
}
此时在移动端屏幕中,图片被拉伸而造成图片模糊。因此,要想让图片高清显示,我们需要把图片的原始大小改成400x400像素,即二倍图。
通常使用二倍图,但是现在还存在3倍图4倍图的情况,视需求而定。
img{
width:400px;
height:400px;
}
此时在css代码中,img的大小被压缩到200x200。