<meta name="viewport" content="width=device-width, initial-scale=1.0" />
只有一行代码;这行代码就规定了网页初始缩放倍数为 1 倍。如果我们在电脑上调整浏览器的“分辨率”(窗口大小)测试网站好了,那么要在移动设备(如手机)上达到这个效果,必定需要这行代码。否则移动设备浏览器可能首次加载网站网页时,缩小网页。
当然,你也可以进行一些拓展。下面是关于 meta 标签 viewport 属性的更多内容信息:
- width:viewport 的宽度。可以指定为一个像素值,如:600,或者为特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
- height:viewport 的高度。
- initial-scale:初始缩放比例,即当浏览器第一次加载页面时的缩放比例。
- maximum-scale:允许浏览者缩放到的最大比例,一般设为 1.0。
- minimum-scale:允许浏览者缩放到的最小比例,一般设为 1.0。
- user-scalable:浏览者是否可以手动缩放,yes(或 true) 或 no(或 false)。
大部分手机浏览器都支持这个语句,据说 Opera Mobile 要达到 9.5 才支持。