iPadがJavaScript/jQueryのランドスケープ/ポートレートモードであるかどうかを確認するにはどうすればよいですか?
-
29-09-2019 - |
質問
iPadがランドスケープモードにある場合は、追加のDivを追加したいと思います。これを見つけることができるIFステートメントの種類はありますか?
ありがとう
解決
jqtouchはそうするようにそれをチェックします:
orientation = Math.abs(window.orientation) == 90 ? 'landscape' : 'portrait';
http://github.com/senchalabs/jqtouch/blob/master/jqtouch/jqtouch.js
また、OnorientationChangeイベントを聴くこともできます
以前の答えを参照してください: JavaScriptを使用してブラウザでAndroid電話の回転を検出する
他のヒント
ドキュメントの幅を簡単に確認できます。
$(window).width();
変数に設定してから、iPadのネイティブ解像度に対して変数を確認できます:768px x 1024pxでポートレート。
<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>
すべてのブラウザと互換性のあるソリューションを試すことができます。
以下です orientationchange
互換性の写真:したがって、私はaを作成します orientaionchange
Polyfill、それは@media属性に基づいてOrientationChangeユーティリティライブラリを修正します————OrientationChange-Fix
window.addEventListener('orientationchange', function(){
if(window.neworientation.current === 'portrait|landscape'){
// do something……
} else {
// do something……
}
}, false);
そして、あなたはによって現在の方向の状態を取得することができます window.neworientation.current
およびの最初の方向状態 window.neworientation.init
.
所属していません StackOverflow