javascript 如何在javascript/jquery中找出ipad是否处于横向/纵向模式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3495678/
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 find out if ipad is in landscape/portrait mode in javascript/jquery?
提问by cat
I want to add an extra div if the ipad is in landscape mode. Is there some sort of if statement that could find this out?
如果 ipad 处于横向模式，我想添加一个额外的 div。是否有某种 if 语句可以发现这一点？
Thanks
谢谢
回答by edtechdev
jQTouch checks it like so:
jQTouch 像这样检查它：
orientation = Math.abs(window.orientation) == 90 ? 'landscape' : 'portrait';
http://github.com/senchalabs/jQTouch/blob/master/jqtouch/jqtouch.js
http://github.com/senchalabs/jQTouch/blob/master/jqtouch/jqtouch.js
You can also listen to onorientationchange events
您还可以收听 onorientationchange 事件
See previous answer: Detect rotation of Android phone in the browser with JavaScript
回答by MoDFoX
You could do a simple check for the width of the document.
您可以对文档的宽度进行简单的检查。
$(window).width();
You could set it to a variable, and then check the variable against the native resolution of the iPad: 768px x 1024px in portrait.
您可以将其设置为一个变量，然后根据 iPad 的原始分辨率检查该变量：纵向 768 像素 x 1024 像素。
回答by Gaurav kumar MVC Expert
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rotation Test</title>
<link type="text/css" href="css/style.css" rel="stylesheet"></style>
<script src="js/jquery-1.5.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEventListener("resize", function() {
// Get screen size (inner/outerWidth, inner/outerHeight)
var height = $(window).height();
var width = $(window).width();
if(width>height) {
// Landscape
$("#mode").text("LANDSCAPE");
} else {
// Portrait
$("#mode").text("PORTRAIT");
}
}, false);
</script>
</head>
<body onorientationchange="updateOrientation();">
<div id="mode">LANDSCAPE</div>
</body>
</html>
回答by Zhansingsong
you can try the solution, compatible with all browser.
您可以尝试解决方案，兼容所有浏览器。
Following is orientationchangecompatibility pic:
therefore, I author a orientaionchangepolyfill, it is a based on @media attribute to fix orientationchange utility library——orientationchange-fix
以下是orientationchange兼容性图片：
因此，我编写了一个orientaionchangepolyfill，它是一个基于@media 属性来修复orientationchange 实用程序库——orientationchange -fix
window.addEventListener('orientationchange', function(){
if(window.neworientation.current === 'portrait|landscape'){
// do something……
} else {
// do something……
}
}, false);
and then, you can retrieve current state of orientation by window.neworientation.currentand initial state of orientation by window.neworientation.init.
然后，您可以通过 检索当前方向window.neworientation.current状态和初始方向状态window.neworientation.init。
