重新渲染方向变化的网页的最佳方法是什么？
我有一个stream畅的CSS布局，当我改变方向时，在iphone上渲染不好。 （刷新时看起来很好）。
我正在使用下面的代码刷新页面的方向更改，这工作正常 – 这只是感觉有点不对。 有没有办法实现这一点，而不必重新加载整个页面？ 这是一个手机网站，我真的不想强迫用户加载两次页面。
var supportsOrientationChange = "onorientationchange" in window, orientationEvent = supportsOrientationChange ? "orientationchange" : "resize"; window.addEventListener(orientationEvent, function() { window.location.reload() }, false); 编辑：
在iphone上testing的两个主要问题是：
我有一个100％的宽度，右alignment的背景图像。 当我将方向从纵向改变为横向时，身体宽度仍然是在纵向模式下呈现的方式，反之亦然。 由于页面过于宽广，似乎将图像渲染两次，从横向到纵向都是一个问题。
假设您的CSS已经在您的各种尺寸的移动设备屏幕上愉快地呈现，您需要在模板的<head>中定义视口。
例如，这会将页面宽度设置为设备的屏幕宽度和100％的初始缩放比例。 在页面加载时应用初始缩放，但在方向改变时不应使用缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
通过在视口中添加最大比例= 1.0参数，您将强制iPad / iPhone保持缩放级别，并根据方向更改重新布置页面。 这样做的缺点是会禁用缩放。 但是，优点是您可以使用媒体查询进行布局调整，以适合当前的方向呈现内容。 您可以在这里阅读更多关于视口： selectViewPort
现在进入媒体查询。 您应该将媒体查询放在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像素，则应用下一个样式块;如果屏幕为768像素或更宽，则应用最后一个样式块。
通过将固定缩放级别与1.0和媒体查询相结合，您可以使您的网站响应式地调整到屏幕大小和方向而不使用JavaScript。 显然你需要确保网站devise得很好，所以用户不需要缩放。 如果您的网站针对移动设备进行了优化，则不会有问题。
请注意：其他非Safari浏览器移动浏览器可能会重新排版页面，而不在视口上设置最大比例。 但是这种行为是不一致的，即使实施比其他设备差，大多数开发者似乎也迎合了苹果设备。 其他一些设备将保持缩放级别，并在方向更改时重新占用视口。 但是所有设备都可以将缩放级别修改为1.0。
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); });
使用了一个方法，在一个单独的JavaScript堆栈框架中导致重绘和回stream。 不喜欢视口的具体答案，因为它通常是一个要求可访问性保持捏缩放等。
$(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 });
我有一个类似的问题，这是我如何解决与jQuery。
在我的情况下，我的<nav>元素的样式没有正确改变。 我使用了与$.get()结合的kidkaos77代码的修改版本来仅加载页面的某个部分：
$(window).bind("resize",function() { //on resize reload only nav & replace $.get("index.php" + ' nav', function(data) { $("nav").replaceWith($(data).find("nav")); }); });
使用这种方法，您不必重新加载整个页面，但是您将不得不指定哪些元素受到方向更改的影响，在您的情况下，您似乎只需要一个div。
另一种select可能是从您的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); }); } });
这里是示例元素“background”的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”或任何您需要控制每个特定设备的页面渲染的内容。
另外，你不需要重新加载页面，它会dynamic调整它。
希望它可以帮助你或别人=），这使我能够为每个屏幕尺寸，移动品牌甚至浏览器types创build自定义的网站，使用相同的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(); });
此代码为我工作。
