重新渲染方向变化的网页的最佳方法是什么?

我有一个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(); }); 

此代码为我工作。