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

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 已经在各种尺寸的移动设备屏幕上顺利呈现，您需要在 中定义视口。你的模板。

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

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

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

现在进入媒体查询。您应该将媒体查询放在 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 */

}

因此，所有正常样式都在此之上并首先应用，然后如果屏幕为 480px 或更宽，则应用下一个样式块，如果屏幕为 768px 或更宽，则应用最后一个样式块。

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

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

Answer 2

2015 更新

所有其他答案都不正确或已过时。这是有效的：

  window.addEventListener('orientationchange', function () {
    var originalBodyStyle = getComputedStyle(document.body).getPropertyValue('display');
    document.body.style.display='none';
    setTimeout(function () {
      document.body.style.display = originalBodyStyle;
    }, 10);
  });

该代码监听 orientationchange 事件并强制重新执行通过隐藏 body 元素并在 10 毫秒后显示它来控制其流程。它不依赖于任何标签或媒体查询。

其他答案建议使用媒体查询，但您已经使用它们，因为您说“刷新后看起来很好”。

一些其他答案建议使用location.reload()。这是非常低效的，因为它将重新加载整个页面，包括图像等。特别是在移动设备上，您不想这样做。

还有其他答案建议添加 或其变体。从 Safari 7 开始，这不再有效。这是一个演示。为了确保您明白它是如何不起作用的，请从 iPad 的横向模式开始，加载页面，然后旋转。请注意，尽管一直使用 Flexbox，但页面并未扩展到完整高度。

与此页面进行比较，我们在生产中使用隐藏/显示正文技术。

Answer 3

使用了在单个 JavaScript 堆栈帧中导致重绘和回流的方法。不热衷于视口特定的答案，因为通常需要可访问性来保持捏缩放等。

$(window).on('orientationchange', function() {
    document.body.style.display='none';
    document.body.offsetHeight; //cause a reflow
    document.body.style.display='block'; //cause a repaint
}); 

或非 jquery 等效项

window.addEventListener('orientationchange', function () {
    document.body.style.display='none';
    document.body.offsetHeight; //cause a reflow
    document.body.style.display='block'; //cause a repaint
});

Answer 4

根据我的经验，最好的方法是像这样做，

<meta name = "viewport" content = "user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width /">
<meta name="apple-mobile-web-app-capable" content="yes"/>

当你改变方向时，像@BenSwayne那样做不会重新缩放回初始比例。不知道为什么

Answer 5

我有一个类似的问题，这就是我用 jQuery 修复它的方法。

就我而言，我的

元素的样式没有正确更改。我使用了 Kidkaos77 代码的修改版本，结合 $.get() 仅加载页面的特定部分：

$(window).bind("resize",function() {
    //on resize reload only nav & replace
    $.get("index.php" +  ' nav', function(data) {
        $("nav").replaceWith($(data).find("nav"));
    });
});

使用此方法，您不必重新加载整个页面，但您会准确指定哪些元素受到方向变化的影响，在您的情况下，您似乎只需要一个 div。

Answer 6

另一种选择可能是添加 &从 html 元素（div、var、span 等）中删除 CSS 类。
这样您就可以只修改给您带来麻烦的元素，并且如果用户调整浏览器窗口的大小，您还可以调整非移动浏览器上的内容。

这是您需要的 Javascript/JQuery 代码：

// Code to run when page has finished loading
$(function() {
    // Add CSS-class to body depending on device platform using user agent string
    // You can add more validations here and/or separate Android from iPhone or add more customized classes like "landscape_iPad", "landscape_iPhone", etc.
   // You can also validate browser types and add classes like "background_IE" or "background_Chrome", etc
    if ((navigator.userAgent.indexOf("iPad") != -1)) {
        $("#background").addClass("landscape");
    } else if ((navigator.userAgent.indexOf("Android") != -1) || (navigator.userAgent.indexOf("iPhone") != -1) || 
    (navigator.userAgent.indexOf("iPhone") != -1)) {
        $("body").addClass("iPhone");
    }

    // Get the initial orientation on iOS devices
    if (!isNaN(window.orientation)) {
        var orientation = ($(window).width() < 980) ? "portrait" : "landscape";
        // Index php
        $("#background").addClass(orientation);
    } else {
        // Choose layout depending on viewport/window width
        var orientation = ($(window).width() < 980) ? "portrait" : "landscape";
        // Index php
        $("#background").addClass(orientation);
    }

    // Bind orientationChange (or viewport/window size changes)
    if (window.onorientationchange != undefined) {
        window.onorientationchange = function() {
            var orientation = ($(window).width() < 980) ? "portrait" : "landscape";
            // Index php
            $("#background").removeClass("portrait landscape").addClass(orientation);
        }
    } else {
        // Use landscape styling if it's wider than 980 pixels. 
        // This is for non mobile browsers, this way if the user resize the browser window, content will adjust too.
        $(window).bind('resize', function(){
            var orientation = ($(window).width() < 980) ? "portrait" : "landscape";
            // Index php
            $("#background").removeClass("portrait landscape").addClass(orientation);
        });
    }
});

这是示例元素“背景”的 CSS 类：

#background.portrait {
    position:absolute;
    top:0px;
    left:0px;
    width:768px;
    height:946px;
    z-index:0;
    background:url(background.png) top center no-repeat;
}
#background.landscape {
    position:absolute;
    top:10px;
    left:20px;
    width:1024px;
    height:724px;
    z-index:0;
    background:url(background_landscape.png) top center no-repeat;
}

这样您就可以自定义横向和纵向行为，并且可以添加更多类，例如：“landscape_iPhone”、“portrait_Android”或者您需要控制每个特定设备的页面呈现的任何内容。

此外，您不需要重新加载页面，它会即时调整。

希望它对您或其他人有所帮助 =)，这使我能够使用相同的 HTML 但不同的 CSS 类创建针对每个屏幕尺寸、移动品牌甚至浏览器类型定制的网站。

Answer 7

尝试这样的事情：

$(function(){

    changeOrientation(window.orientation == 0 ? "portrait" : "landscape");

    $('body').bind('orientationchange',function(event){
        changeOrientation(event.orientation)
    });

    function changeOrientation(ori){
        $("#orientation").removeClass('portrait landscape');
        $("#orientation").addClass(ori);
    }     
});

Answer 8

$(window).bind('resize', function() { location.reload(); });

这段代码对我有用。