Html 方向改变时如何重新加载网页？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17708869/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to reload the webpage when orientation changes?
提问by David Berning
I'm trying to trigger an event with jQuery mobile that automatically reloads the page when the device's orientation changes. I have media queries written with max-device-width,orientation:landscape,and orientation: portrait. Since the <video>wont scale properly...the only solution I can think of is to refresh the page to the correct media query with the device is rotated.
我正在尝试使用 jQuery mobile 触发一个事件，当设备的方向发生变化时，该事件会自动重新加载页面。我有用max-device-width,orientation:landscape,和编写的媒体查询orientation: portrait。由于<video>不会正确缩放......我能想到的唯一解决方案是在设备旋转的情况下将页面刷新到正确的媒体查询。
How do I go about doing this? Thanks.
我该怎么做？谢谢。
回答by David Berning
Thanks guys who answered but I found this and used this and it worked perfectly.
感谢那些回答的人，但我找到了这个并使用了它并且它工作得很好。
<script type="text/javascript"> // RELOADS WEBPAGE WHEN MOBILE ORIENTATION CHANGES
window.onorientationchange = function() {
var orientation = window.orientation;
switch(orientation) {
case 0:
case 90:
case -90: window.location.reload();
break; }
};
回答by Ross
How about this?
这个怎么样？
$(window).on('orientationchange', function(e) {
$.mobile.changePage(window.location.href, {
allowSamePageTransition: true,
transition: 'none',
reloadPage: true
});
});
It would be best to namespace that orientationchange event to a specific page.
最好将该orientationchange 事件命名为特定页面。
回答by subindas pm
Please try the following code to redirect the page on orientation event, its work well for me
请尝试使用以下代码在方向事件上重定向页面，它对我来说效果很好
if (window.DeviceOrientationEvent) {
window.addEventListener('orientationchange', function() { location.reload(); }, false);
}
Thanks
谢谢
回答by logesh kumar
<script type="text/javascript">
window.addEventListener("orientationchange", function() {
console.log(screen.orientation);
}, false);
</script>
回答by Shawn
using jQuery
使用 jQuery
$(window).bind('orientationchange', function (event) {
location.reload(true);
});
