twitter bootstrap视口

Question

我基于Twitter Bootstrap继承了一组网站模板.在<head>以下元标记出现:

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

但根据文档,它应该是:

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

有人可以解释这两者之间的区别是什么？

Answer 1

它们只是不同的属性,您可以添加一个或多个.来自Mozilla的网站:

的宽度属性控制视口的大小.它可以设置为特定数量的像素,例如width = 600,或者设置为特殊值device-width值,它是CSS像素中屏幕的宽度,比例为100%.

第二个控制显示页面时的缩放:

在最初的规模属性控制在首次加载页面的缩放级别.

此外,您还可以使用最大规模,最小规模和用户可扩展属性来进一步控制用户缩放页面的方式.

这是必要的,因为移动设备具有非常不同的像素密度,因此通过指定这些属性,无论屏幕密度如何,页面都将在iPhone,Galaxies,Nokias等中以几乎相同的物理尺寸呈现.