javascript - 在方向改变时重新渲染网页的最佳方法是什么？

Question

我有一个流畅的 CSS 布局，当我更改方向时，它在 iPhone 上渲染得很糟糕。 (刷新后看起来不错)。

我使用下面的代码来刷新方向更改时的页面，效果很好 - 只是感觉这样做有点不对。有没有什么方法可以实现这一点而无需重新加载整个页面？这是一个移动网站，我真的不想强制用户加载页面两次。

var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    window.location.reload()
}, false);   

编辑:

在 iPhone 上测试时的两个主要问题是:

我有一个宽度为 100%、背景图像右对齐的图像。 当我将方向从纵向更改为横向时，主体宽度保持在纵向模式下呈现的方式，反之亦然。从横向到纵向，这更是一个问题，因为页面太宽，并且似乎渲染了两次图像。

Answer 1

假设您的 CSS 已经在各种尺寸的移动设备屏幕上顺利呈现，您需要在模板的 中定义视口(viewport)。

例如，这将页面宽度设置为设备的屏幕宽度，并将初始缩放设置为 100%。初始缩放在页面加载时应用，但在方向更改时不应用。

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

通过向视口(viewport)添加 Maximum-scale=1.0 参数，您将强制 iPad/iPhone 保持缩放级别并在方向更改时重新布局页面。这样做的缺点是它将禁用缩放。但是，优点是您可以使用媒体查询进行布局调整，以适合当前方向的方式呈现内容。您可以在此处阅读有关视口(viewport)的更多信息:Choosing a ViewPort

现在进入媒体查询。您应该将媒体查询放在 CSS 文件的底部，并按照屏幕宽度从最小宽度到最大宽度的顺序。例如，取自Html5BoilerPlate CSS 示例:

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */

}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

}

因此，所有普通样式都在此之上并首先应用，然后，如果屏幕为 480 像素或更宽，则应用下一个样式 block ，然后，如果屏幕为 768 像素或更宽，则应用最后一个样式 block 。

通过将固定缩放级别设置为 1.0 和媒体查询相结合，您可以使您的网站根据屏幕尺寸和方向进行响应式调整，而无需使用 JavaScript。显然，您需要确保网站设计良好，以便用户不需要缩放。如果您的网站针对移动设备进行了优化，这应该不是问题。

请注意:其他非 safari 移动浏览器可能会重新布局页面，而不在视口(viewport)上设置最大比例。但这种行为是不一致的，大多数开发人员似乎都迎合苹果设备，即使实现比其他设备差。当方向改变时，其他一些设备将保持缩放级别并重新调整视口(viewport)的位置。但所有设备都可以将缩放级别固定为 1.0。