如何發現ipad在javascript/jquery中是否處於橫向/縱向模式？

如果ipad處於橫向模式，我想添加一個額外的div。是否有某種可以發現這一點的if語句？如何發現ipad在javascript/jquery中是否處於橫向/縱向模式？

謝謝

2010-08-16 cat

jQTouch檢查它像這樣：

orientation = Math.abs(window.orientation) == 90 ? 'landscape' : 'portrait';

http://github.com/senchalabs/jQTouch/blob/master/jqtouch/jqtouch.js

您還可以聽onorientationchange事件

參考先前的回答：Detect rotation of Android phone in the browser with JavaScript

來源

2010-08-16 19:31:06 edtechdev

你可以做一個簡單的檢查文件的寬度。

$(window).width();

您可以將其設置爲變量，然後根據iPad的原始分辨率檢查該變量：縱向768px x 1024px。

來源

2010-08-16 17:44:32 MoDFoX

多數民衆贊成在一個好主意，我會嘗試它告訴你它是怎麼回事！ – cat 2010-08-16 18:00:43

這到目前爲止工作很好，謝謝！ – cat 2010-08-16 18:14:26

非常好！很高興我能幫上忙。 – MoDFoX 2010-08-16 18:15:16

<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>

來源

2015-01-08 14:26:54

你可以嘗試的解決方案，兼容所有眉毛呃。

以下是orientationchange兼容性圖：因此，我創作一個orientaionchange填充工具，它是一個基於@media屬性來解決orientationchange實用library-- orientationchange-fix

window.addEventListener('orientationchange', function(){ 
if(window.neworientation.current === 'portrait|landscape'){ 
    // do something…… 
} else { 
    // do something…… 
} 
}, false);

，然後你可以檢索目前狀態的方向window.neworientation.current和初始狀態的方向window.neworientation.init。

來源

2016-09-13 09:52:43 Zhansingsong

如何發現ipad在javascript/jquery中是否處於橫向/縱向模式？

回答

相關問題