欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

viewport的meta标签

程序员文章站 2024-01-24 20:07:04
...

我们都是知道用户是可以对页面进行页面缩放的。但是pc端的用户缩放和移动端的缩放浏览器是有差异的。

pc端:用户缩放影响的布局视口的尺寸,会影响布局。
移动端:用户缩放影响的视觉视口的尺寸。(页面布局不会乱)

initial-scale

初始化缩放,也叫系统缩放。
系统缩放是参照与理想视口(独立设备像素)进行缩放,同时控制布局视口和视觉视口。
当设置initial-scale=1时,等同于width=device-width;

太大的元素

移动端大多数浏览器厂商的视觉视口要尽量包住页面内容。当页面内容的宽度大于布局视口的宽度时,超出布局视口宽度的内容也会呈现出来。
viewport的meta标签

完美视口

当viewport的meta标签中同时有width=devic-width和initial-scale=1.0,这个时候就是完美视口

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

完美视口不仅解决旋转时的问题。如果页面中存在太大的元素,大部份浏览器都不会改变布局视口了。

width=devic-width和initial-scale=1.0谁说了算?

这两个值都是用来设置布局视口=设备独立像素;当两者设置的布局视口大小不一样时,就会有冲突。
当他们设置的布局视口不一样时,谁设置的布局视口大,就听谁的。

<meta name=“viewport”>完整版

这个标签是苹果发明的,桌面浏览器不支持。
完整代码:

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

为什么必须这么写?

width:直接设置数值大部分的安卓手机是不支持,但是ios支持。
	   同时设置该值时,ie10的用户旋转时就会正常。
initial-scale:控制初始缩放比例;同时当用户旋转设备时,布局视口的宽度会发生改变。
			(没有这个值,用户旋转时,不会改变布局时视口)
user-scalable:是否允许缩放(no||yes),默认允许。
			   该属性值ios10以下不支持,其他都支持;
minnimum-scale:允许用户缩放的最小比例(用来禁止ios10以下的用户缩放行为)
maxinum-scale:允许用户缩放的最大比例(用来禁止ios10以下的用户缩放行为)

更多有关移动开发资料请参考荷兰前端大神Peter-Paul Koch的《移动Web手册》