the*_*ise 28 javascript iphone mobile orientation
我有一个流畅的CSS布局,当我改变方向时,它在iphone上渲染得很糟糕.(刷新时看起来很好).
我正在使用下面的代码刷新方向更改的页面,这很好 - 这只是感觉有点不对.有没有办法实现这一点,而无需重新加载整个页面？这是一个移动网站,我真的不想强迫用户加载页面两次.
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
window.location.reload()
}, false);
编辑:
在iphone上测试时的两个主要问题是:
我有一个100%宽度,右对齐的背景图像.当我将方向从纵向更改为横向时,主体宽度保持与在纵向模式下呈现的方式相同,反之亦然.从景观到肖像更是一个问题,因为页面太宽,似乎渲染图像两次.
Ben*_*yne 24
假设您的CSS已经很好地在各种大小的移动设备屏幕上呈现,您需要在模板的<head>中定义视口.
例如,这会将页面宽度设置为设备的屏幕宽度,并将初始缩放设置为100%.初始缩放在页面加载时应用,但在方向更改时不应用.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
通过向视口添加maximum-scale = 1.0参数,您将强制iPad/iPhone保持缩放级别并在方向更改时重新布局页面.这样做的缺点是它会禁用缩放.但是,优点是您可以使用媒体查询进行布局调整,以便以适当的方式呈现当前方向的内容.您可以在此处阅读有关视口的更多信息:选择ViewPort
现在进入媒体查询.您应该将媒体查询放在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.
Dan*_*scu 11
所有其他答案都不正确或过时.这是有效的:
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毫秒后显示它来强制重新流动元素.它不依赖于任何<meta>标签或媒体查询.
其他答案建议使用媒体查询,但你已经使用它们,因为你说"它刷新时看起来很好".
其他一些答案建议使用location.reload().这是非常低效的,因为它会重新加载整个页面,包括图像等.特别是在移动设备上,你不想这样做.
其他答案建议增加<meta name="viewport" content="width=device-width, initial-scale=1.0">或改变.从Safari 7开始,这不再适用.这是一个演示.要确保您看到它不起作用,请从横向模式的iPad开始,加载页面,然后旋转.请注意,尽管一直使用flexbox,页面也不会扩展到全高.
将其与此页面进行比较,我们在生产中使用hide/show body技术.