HTML5 Boilerplate：Meta viewport和width = device-width
我正在构build一个自适应/响应式网站。
关于HTML5BP的最近更改：
“ 移动/ iOS的CSS修订 ”
我已经开始使用：
<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列（由于美达查询， initial-scale=1和JS修复视口缩放错误 ）。
总而言之 ，在横向模式下，缩放页面：
<meta name="viewport" content="width=device-width">
…而这不是：
<meta name="viewport" content="width=device-width, initial-scale=1">
注意：在iPad / iPhone上查看HTML5BP网站时，您可以看到这种缩放效果。
我的问题：
- 这是否成为新的标准（即在横向模式下变焦）？
- 我有一段时间向我的同事和老板们解释这个变化……他们习惯于在水平模式下看到不同的布局; 现在页面放大和布局保持不变（除了更大）。 如何向无知的群众解释这个问题的任何提示（其中，我可能会被包括在内）？
@robertc：谢谢！ 这非常有帮助。
我其实不喜欢initial-scale=1 ; 这是我的同事谁习惯看到布局的变化，而不是放大。 我相信我会被迫添加initial-scale=1来取悦每个人（因为没有缩放，看到布局的变化，是他们以前看到的）。
我刚刚注意到github上的HTML5BP index.html和网站 ，使用<meta name="viewport" content="width=device-width"> ; 对我来说，这是足够好的原因，以消除initial-scale=1 ，但当我试图向“非极客”解释这些事情时，我感到很惊讶。 ：d
这不是一个新的标准，它是如何总是工作AFAIK。 如果将宽度设置为固定数量的像素，则将纵向旋转到横向只会改变比例，因为虚拟像素的数量保持不变。 我猜测，添加initial-scale=1会在您切换之间阻止缩放比例 – 也就是说，页面的缩放因子在设备旋转时不会改变。 如果您最初在横向而不是纵向加载页面，页面看起来像什么？
我会build议如果你想要当你指定initial-scale=1时得到的行为，那么指定initial-scale=1 。 HTML5 BoilerPlate是您应该修改以适合您自己的要求的东西。
苹果[有点]清楚地描述了这里的视口行为。
主要是，iOS设备中的设备宽度和设备高度是指纵向模式下的屏幕尺寸。 如果将视口宽度设置为设备宽度，则将其设置为一个常数值 。 因此，当屏幕的物理宽度随着宽高比的变化而变化时，浏览器会将您input的常量大小以横向模式拉伸到屏幕的宽度。 这种行为既不对也不对，只是。
苹果公司build议width=device-width适合平台的应用程序，所以它肯定是“苹果”的做法：
如果您正在devise专门针对iOS的Web应用程序，则build议您的网页大小是iOS可见区域的大小。 Applebuild议您将宽度设置为设备宽度，以便纵向方向上的比例为1.0，并且在用户更改为横向时，视口不会resize。 [即。 该视口保留纵向设备宽度，但缩放或拉伸以呈现适合景观宽度]
就个人而言，我更喜欢initial-scale = 1.0，没有绝对的设备宽度设置方法，因为它使视口始终填充设备屏幕，而不会拉伸。 苹果也认为这个有效的标记：
图3-14显示了iPhone上初始缩放设置为1.0时的相同网页。 iOS上的Safari推断宽度和高度以适应可见区域中的网页。 视图宽度设置为纵向方向的设备宽度和横向方向的设备高度。
要添加一点点更新：这仍然是草稿forms，但它绝对是一些东西来看看。 也有IE 10支持的前缀版本。 通过使用CSS而不是HTML，通过应用initial-scale:1; ，清除了大量的混淆initial-scale:1; zoom:1; 并给予min / max选项的width ， height和zoom ，这进一步增加了调整的范围，如果需要的话。
extend-to-zoom到救援！ （ http://dev.w3.org/csswg/css-device-adapt/#lsquoextend-to-zoomrsquo ）
<meta name="viewport" content="initial-scale=1.0">转换为…
@viewport{ zoom: 1.0; width: extend-to-zoom; } @-ms-viewport{ width: extend-to-zoom; zoom: 1.0; }
其中<meta name="viewport" content="width:device-width,initial-scale=1.0">转换为…
@viewport{ zoom: 1.0; width: device-width; /* = 100vw */ } @-ms-viewport{ width: device-width; zoom: 1.0; }
注意： width:extend-to-zoom 100%; 等于width:device-width;
我发现Mozilla的视口解释是最详细和有用的。 这是一个摘录：
width属性控制视口的大小。 可以将其设置为特定数量的像素，例如
width=600，也可以设置为特殊值device-width值，即以CSS像素的100％比例的屏幕宽度。 （有相应的height和device-height值，对于具有根据视口高度更改大小或位置的元素的页面可能会有用。）
initial-scale属性控制首次加载页面时的缩放级别。maximum-scale，minimum-scale和user-scalable属性控制着用户如何放大或缩小页面的方式
你试过这个吗？
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
