41

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

关于最近对 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 列（由于 meida 查询，initial-scale=1以及针对视口缩放错误的 JS 修复）。

总而言之，在横向模式下，这会缩放页面：

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

...这不会：

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

注意：在 iPad/iPhone 上查看HTML5BP 网站时，您可以看到这种缩放效果。

我的问题：

  1. 这是否成为新标准（即在横向模式下缩放）？
  2. 我花了很长时间向我的同事和老板解释这种变化......他们习惯于在水平模式下看到不同的布局；现在页面缩放并且布局保持不变（除了它更大）。关于如何向无知的群众（其中可能包括我）解释这一点的任何提示？

@robertc：谢谢！这很有帮助。

我实际上喜欢没有; initial-scale=1习惯于看到布局变化而不是缩放的是我的同事。我敢肯定我会被迫添加initial-scale=1只是为了取悦所有人（因为不缩放，看到布局变化，是他们习惯看到的）。

我刚刚注意到github 上的 HTML5BP index.html和网站正在使用<meta name="viewport" content="width=device-width">；对我来说，这是放弃的充分理由，但是当我试图向“非极客”解释这些事情initial-scale=1时，我会扬起眉毛。:D

4

5 回答 5

22

这不是一个新标准，它一直是 AFAIK 的工作方式。如果将宽度设置为固定数量的像素，则将纵向旋转为横向只会更改比例，因为虚拟像素的数量保持不变。我猜测添加initial-scale=1会在您切换时阻止缩放 - 也就是说，您的页面的缩放因子不会随着设备的旋转而改变。如果您最初以横向而不是纵向加载页面，该页面会是什么样子？

我建议如果你想要你指定时得到的行为initial-scale=1，然后指定initial-scale=1. HTML5 BoilerPlate 是您应该根据自己的要求进行修改的东西。

于 2012-06-13T13:31:51.273 回答
11

Apple [有点] 清楚地描述了这里的视口行为。

iOS 设备中的 device-width 和 device-height 主要是指纵向模式下的屏幕尺寸。如果将视口宽度设置为设备宽度，则与将其设置为常量值相同。因此，当屏幕的物理宽度随着纵横比的变化而变化时，浏览器会将您输入的恒定尺寸拉伸到横向模式下的屏幕宽度。这种行为既不对也不对，就是这样。

Apple 建议width=device-width为平台量身定制应用程序，因此这肯定是“Apple”的做法：

如果您正在专门为 iOS 设计 Web 应用程序，那么推荐的网页大小是 iOS 上可见区域的大小。Apple 建议您将宽度设置为 device-width，以便纵向缩放为 1.0，并且当用户更改为横向时不会调整视口大小。[IE。视口保留纵向设备宽度，但会缩放或拉伸以适应横向宽度]

就个人而言，我更喜欢没有绝对设备宽度设置方法的 initial-scale=1.0，因为它使视口始终填满设备屏幕而不会拉伸。Apple 也认为此有效标记：

图 3-14 显示了 iPhone 上初始比例设置为 1.0 时的相同网页。iOS 上的 Safari 会推断宽度和高度以适应可见区域中的网页。视口宽度在纵向设置为设备宽度，在横向设置为设备高度。

于 2012-11-09T06:22:57.870 回答
7

添加一点更新：这仍然是草稿形式，但绝对值得研究。还有一个支持 IE 10 的前缀版本。initial-scale:1;通过使用 CSS 而不是 HTML，它通过应用tozoom:1;和为, , &提供min/max选项来消除您所说的很多混淆，这进一步增加了需要时的调整范围。widthheightzoom

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;

http://dev.w3.org/csswg/css-device-adapt/

于 2013-12-24T16:49:44.467 回答
2

我发现Mozilla 的视口解释最详细、最有帮助。这是一段摘录：

width 属性控制视口的大小。它可以设置为特定数量的像素，例如width=600或设置为特殊值 device-width 值，它是以 CSS 像素为单位的屏幕宽度，比例为 100%。（有对应的height和device-height值，这对于具有根据视口高度改变大小或位置的元素的页面可能很有用。）

该initial-scale属性控制页面首次加载时的缩放级别。、maximum-scale和属性控制允许用户放大或缩小页面的minimum-scale方式user-scalable

于 2013-10-08T22:10:57.910 回答
1

你试过这个吗？

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
于 2014-02-24T21:07:55.667 回答