HTML5 Boilerplate：Meta viewport和width = device-width

我正在建立一个自适应/响应网站。

关于最近对HTML5BP的改变：

我开始使用：

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

…我有我的CSS：

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

当包括initial-scale = 1时，从垂直旋转到水平(在iPad / iPhone上)导致布局从2列(例如)变为3列(由于meida查询，initial-scale = 1和JS fix for viewport scale bug)。

总而言之，当处于横向模式时，这会缩放页面：

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

…而且这不：

<Meta name="viewport" content="width=device-width,initial-scale=1">

注意：在iPad / iPhone上查看HTML5BP website时，您可以看到此放大效果。

我的问题：

>这是否成为新的标准(即在横向模式下缩放)？
>我有一段时间向我的同事和老板解释这个变化…他们习惯于在水平模式下看到不同的布局;现在页面缩放和布局保持不变(除了它更大)。任何提示，如何解释这对无知的群众(其中，我可能包括在内)？

@robertc：谢谢！这是非常有益的。

我实际上喜欢没有初始尺度= 1;它是我的同事谁习惯看到布局变化，而不是缩放。我相信我会被迫添加initial-scale = 1只是为了大家(因为没有缩放，看到布局的变化，是他们习惯看到的)。

我刚刚注意到HTML5BP index.html on github和the website使用< Meta name =“viewport”content =“width = device-width”&gt ;;对我来说，这是足够的原因沟渠初始尺度= 1，但是当我尝试解释these things到“非怪人”时，我得到了眉毛。：D

解决方法

这不是一个新的标准，它是如何总是工作AFAIK。如果将宽度设置为固定的像素数，则将纵向旋转为横向仅更改缩放，因为虚拟像素的数量保持不变。我猜，添加initial-scale = 1是阻止缩放，当你在之间切换 – 这是你的页面的缩放因子不会随着设备旋转更改。如果您最初在横向而不是纵向中加载页面，页面是什么样子？

我建议如果你想要的行为，当你指定initial-scale = 1，然后指定initial-scale = 1。 HTML5 BoilerPlate是你应该修改以满足您自己的要求。

HTML5 Boilerplate：Meta viewport和width = device-width

解决方法

猜你在找的HTML5相关文章