Javascript 在方向更改时重新呈现网页的最佳方法是什么？

我有一个流动的CSS布局，当我改变方向时，它在iphone上的渲染效果很差。（刷新时看起来很好）

我正在使用下面的代码刷新关于方向更改的页面，这很好，只是感觉这样做有点不对劲。有没有什么方法可以在不重新加载整个页面的情况下实现这一点？这是一个移动网站，我真的不想强迫用户加载页面两次

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

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

编辑：

在iphone上测试时，两个主要问题是：

我有一张100%宽的照片，背景图像右对齐。

---

当我将方向从“纵向”更改为“横向”时，主体宽度保持为在“纵向”模式下的渲染方式，反之亦然。从横向到纵向，这是一个更大的问题，因为页面太宽，似乎要渲染两次图像。

假设您的CSS已经在各种大小的移动设备屏幕上愉快地渲染，您需要在模板的底部定义视口

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

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

因此，所有的常规样式都高于此值并首先应用，然后如果屏幕为480px或更宽，则应用下一个样式块，如果屏幕为768px或更宽，则应用最后一个样式块

通过将固定缩放级别设置为1.0和媒体查询相结合，您可以在不使用javascript的情况下根据屏幕大小和方向相应地调整站点大小。显然，你需要确保网站设计良好，这样用户就不需要缩放。如果你的网站是针对移动设备进行优化的，这应该不会是一个问题

---

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

另一个选项是从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);
        });
    }
});

通过这种方式，您可以自定义横向和纵向行为，并可以添加更多类别，如：“横向iPhone”、“纵向Android”或任何您需要的类别，以控制每个特定设备的页面呈现

此外，您不需要重新加载页面，它会动态调整页面

---

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

尝试以下操作：

$(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);
    }     
});

---

根据我的经验，最好的办法就是这样做

<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那样操作不会在更改方向时重新缩放回初始比例。我不知道为什么

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

此代码对我有效。

2015更新 所有其他答案都不正确或过时。以下是有效的方法：

window.addEventListener（'orientationchange'，function（）{
var originalBodyStyle=getComputedStyle（document.body）.getPropertyValue（'display'）；
document.body.style.display='none'；
setTimeout（函数（）{
document.body.style.display=原始BodyStyle；
}, 10);
});我有一个类似的问题，这就是我用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。
使用了一种在单个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
});

你已经在使用CSS媒体查询了吗？@Pointy没有，没有媒体查询。无论是水平还是垂直，页面布局都是相同的（相同的CSS）。我更新了我的答案，以便更好地解释。你的页面是否只针对iphone？那ipad、android、WM7等呢。？如果使用不同宽度/大小的浏览器导致页面显示不佳，则需要查看布局。@Ryan Ternier是的，所有手机。如果页面在方向更改后刷新，则布局显示良好，因此这不是布局问题，问题在于手机在方向转换后呈现页面时。@theorise获得了一个示例页面，以便我可以测试您所描述的内容？看起来您可以放弃上面建议的最大比例，并根据需要使用一些javascript来增强布局（无需重新加载页面）。查看另一个关于通过JavaScript操作视口的stackoverflow页面：您还可以使用
方向：横向
和
方向：纵向
媒体查询。@BobAman您是对的，我认为Html5Boilerblate CSS使用屏幕宽度的原因是为了跨平台支持，包括台式机/笔记本电脑。例如，如果您刚刚将桌面计算机上的浏览器窗口调整为纵向形状，该怎么办。（例如：在windows 7机器上按Win+Left可占据左侧屏幕的一半-通常用于并排查看2个应用程序）。但我想您可以扩展上述媒体查询，以包括尺寸调整和方向调整
$(window).on('orientationchange', function() {
    document.body.style.display='none';
    document.body.offsetHeight; //cause a reflow
    document.body.style.display='block'; //cause a repaint
}); 

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