在方向更改时重新呈现网页的最佳方法是什么? [英] What is the best method of re-rendering a web page on orientation change?
问题描述
我有一个流畅的 CSS 布局，当我改变方向时，它在 iphone 上的渲染效果很差.(刷新后看起来还不错)
I have a fluid CSS layout which is rendering badly on an iphone when I change the orientation. (It looks fine when it is refreshed).
我正在使用下面的代码在方向更改时刷新页面，效果很好 - 只是感觉这样做有点错误.有什么方法可以实现这一点而不必重新加载整个页面?这是一个移动网站，我真的不想强迫用户加载页面两次.
I am using the code below to refresh the page on orientation change, which works fine - it just feels a little wrong doing so. Is there any way of achieving this without having to reload the entire page? It is a mobile site, I don't really want to force the user to load the page twice.
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
window.location.reload()
}, false);
在 iphone 上测试时的两个主要问题是:
The two main issues when testing on an iphone are:
我有一个 100% 宽度的背景图像，右对齐.当我将方向从纵向更改为横向时，主体宽度保持在纵向模式下的呈现方式，反之亦然.从横向到纵向更像是一个问题，因为页面太宽，而且似乎渲染了两次图像.
I have a which is 100% width, with a right aligned background image. When I change the orientation from portrait to landscape the body width remains as how it rendered on portrait mode and vice versa. It is more of an issue from landscape to portrait as the page is too wide and it seems to render the images twice.
推荐答案
假设您的 CSS 已经可以在各种尺寸的移动设备屏幕上愉快地呈现，您需要在 <head> 中定义视口.你的模板.
Assuming your CSS is already happily rendering on your various size mobile device screens, you need to define the viewport in the <head> of your template.
例如，这将页面宽度设置为设备的屏幕宽度和 100% 的初始缩放.初始缩放在页面加载时应用，但在方向改变时不应用.
Example, this sets the page width to be the device's screen width and an initial zoom of 100%. Initial zoom is applied at page load, but not when the orientation is changed.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
通过向视口添加一个 max-scale=1.0 参数，您将强制 iPad/iPhone 保持缩放级别并在方向改变时重新布局页面.这样做的缺点是它会禁用缩放.但是，优点是您可以使用媒体查询进行布局调整，以适合当前方向的方式呈现内容.您可以在此处阅读有关视口的更多信息:选择视口
By adding a maximum-scale=1.0 parameter to the viewport you will force the iPad/iPhone to maintain the zoom level and re-layout the page on orientation change. The disadvantage of this is that it will disable zooming. However, the advantage is that you can make layout adjustments with media queries to present the content in a suitable fashion for the current orientation. You can read more about viewport here: Choosing a ViewPort
现在进入媒体查询.您应该将媒体查询放在 CSS 文件的底部，并按照屏幕宽度的最小宽度到最大宽度的顺序.例如，取自 Html5BoilerPlate CSS 示例:
Now onto media queries. You should put media queries at the bottom of your CSS file and in the order of smallest width to largest width for screen widths. For example, taken from the Html5BoilerPlate CSS example:
@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 像素或更宽，则应用最后一个样式块.
So all your normal styles are above this and applied first, then if the screen is 480px or wider the next block of styles are applied, then if the screen is 768px or wider the last block of styles are applied.
通过将固定缩放级别与 1.0 和媒体查询相结合，您可以使您的网站响应式地调整大小以适应屏幕大小和方向，而无需使用 JavaScript.显然，您需要确保网站设计得很好，这样用户就不需要缩放.如果您的网站针对移动设备进行了优化，这应该不是问题.
By combining the fixed zoom level to 1.0 and the media-queries, you can make your site responsively resize to the screen size and orientation without javascript. Obviously you need to make sure the site is then well designed so users don't need zooming. If your site is optimized for mobile this shouldn't be a problem.
请注意:其他非 safari 移动浏览器可能会重新布局页面，而无需在视口上设置最大比例.但是这种行为是不一致的，即使实现比其他设备差，大多数开发人员似乎也迎合了苹果设备.当方向改变时，一些其他设备将保持缩放级别并重新居中视口.但是所有设备都可以将缩放级别固定为 1.0.
Please note: other non-safari mobile browsers may re-layout the page without setting the maximum-scale on the viewport. But this behavior is inconsistent and most developers seem to cater to apple devices even if the implementation is worse than other devices. Some other devices would maintain the zoom level and recenter the viewport when the orientation changes. But all devices are ok to fix the zoom level to 1.0.
这篇关于在方向更改时重新呈现网页的最佳方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
