モバイルデバイス専用のウェブサイトを構築しています。特に、横向きモードで表示するのに最適なページが1つあります。
そのページにアクセスしているユーザーがポートレートモードでページを表示しているかどうかを検出し、表示している場合は、ページがランドスケープモードで最適に表示されていることをユーザーに通知するメッセージを表示しますか？ユーザーがすでに横向きモードで表示している場合、メッセージは表示されません。
したがって、基本的には、サイトでビューポートの向きを検出し、向きがPortraitの場合、このページが横向きモードで最もよく表示されることをユーザーに通知する警告メッセージを表示します。
回答:
if(window.innerHeight > window.innerWidth){
alert("Please use Landscape!");
}jQuery Mobileには、このプロパティの変更を処理するイベントがあります...誰かが後で回転した場合に警告したい場合- orientationchange
また、いくつかグーグルした後、チェックしてくださいwindow.orientation（これは度で測定されていると思います...）
window.matchMediaCSS構文によく似ているため、私が使用して好むを使用することもできます。
if (window.matchMedia("(orientation: portrait)").matches) {
// you're in PORTRAIT mode
}
if (window.matchMedia("(orientation: landscape)").matches) {
// you're in LANDSCAPE mode
}iPad 2でテスト済み。
デビッドウォルシュには、より的確なアプローチがあります。
// Listen for orientation changes
window.addEventListener("orientationchange", function() {
// Announce the new orientation number
alert(window.orientation);
}, false);これらの変更中に、window.orientationプロパティが変更される場合があります。値0はポートレートビューを意味し、-90はデバイスが右に横向きに回転したことを意味し、90はデバイスが左に横向きに回転したことを意味します。
CSS3を使用できます。
@media screen and (orientation:landscape)
{
body
{
background: red;
}
}たとえば、いくつかの方法があります。
window.orientation値を確認innerHeight対innerWidth以下のいずれかの方法を採用できます。
デバイスがポートレートモードになっているかどうかを確認する
function isPortrait() {
return window.innerHeight > window.innerWidth;
}デバイスが横向きモードになっているかどうかを確認する
function isLandscape() {
return (window.orientation === 90 || window.orientation === -90);
}使用例
if (isPortrait()) {
alert("This page is best viewed in landscape mode");
}向きの変更を検出するにはどうすればよいですか？
$(document).ready(function() {
$(window).on('orientationchange', function(event) {
console.log(orientation);
});
});デスクトップコンピューターでブラウザーウィンドウのサイズを変更する場合、横向きまたは縦向きの両方になる可能性があるため、より安定した解決策はウィンドウではなく画面を使用することです。
if (screen.height > screen.width){
alert("Please use Landscape!");
}これらすべての素晴らしいコメントを毎日のコーディングに適用するために、すべてのアプリケーション間の継続性のために、jqueryとjqueryモバイルコードの両方で以下を使用することにしました。
window.onresize = function (event) {
applyOrientation();
}
function applyOrientation() {
if (window.innerHeight > window.innerWidth) {
alert("You are now in portrait");
} else {
alert("You are now in landscape");
}
}固定されたwindow.orientationクエリを試さないでください（0、90などは縦、横などを意味しません）：
http://www.matthewgifford.com/blog/2011/12/22/a-misconception-about-window-orientation/
ブラウザへのアクセス方法に応じて、iOS7でも0は必ずしも縦長ではありません
最も投票された回答に同意しません。使用screenしていないwindow
if(screen.innerHeight > screen.innerWidth){
alert("Please use Landscape!");
}それを行う適切な方法です。で計算するとwindow.height、Androidで問題が発生します。キーボードを開くと、ウィンドウが縮小します。したがって、ウィンドウではなく画面を使用してください。
これscreen.orientation.typeは良い答えですが、IEでは。
https://caniuse.com/#search=screen.orientation
CCSのみ
@media (max-width: 1024px) and (orientation: portrait){ /* tablet and smaller */
body:after{
position: absolute;
z-index: 9999;
width: 100%;
top: 0;
bottom: 0;
content: "";
background: #212121 url(http://i.stack.imgur.com/sValK.png) 0 0 no-repeat; /* replace with an image that tells the visitor to rotate the device to landscape mode */
background-size: 100% auto;
opacity: 0.95;
}
}場合によっては、CSSが適切にレンダリングされるように、ビジターがデバイスを回転させた後にページにリロードする小さなコードを追加することができます。
window.onorientationchange = function() {
var orientation = window.orientation;
switch(orientation) {
case 0:
case 90:
case -90: window.location.reload();
break; }
};$(window).on("orientationchange",function( event ){
alert(screen.orientation.type)
});//see also http://stackoverflow.com/questions/641857/javascript-window-resize-event
//see also http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html
/*
Be wary of this:
While you can just hook up to the standard window resize event, you'll find that in IE, the event is fired once for every X and once for every Y axis movement, resulting in a ton of events being fired which might have a performance impact on your site if rendering is an intensive task.
*/
//setup
window.onresize = function(event) {
window_resize(event);
}
//timeout wrapper points with doResizeCode as callback
function window_resize(e) {
window.clearTimeout(resizeTimeoutId);
resizeTimeoutId = window.setTimeout('doResizeCode();', 10);
}
//wrapper for height/width check
function doResizeCode() {
if(window.innerHeight > window.innerWidth){
alert("Please view in landscape");
}
}幅/高さの比較に基づいて方向を決定する別の方法：
var mql = window.matchMedia("(min-aspect-ratio: 4/3)");
if (mql.matches) {
orientation = 'landscape';
} 「サイズ変更」イベントで使用します。
window.addEventListener("resize", function() { ... });iOS doens't更新screen.width＆screen.height向きの変更。Androidは変更しても更新されませんwindow.orientation。
この問題に対する私の解決策：
var isAndroid = /(android)/i.test(navigator.userAgent);
if(isAndroid)
{
if(screen.width < screen.height){
//portrait mode on Android
}
} else {
if(window.orientation == 0){
//portrait mode iOS and other devices
}
}次のコードを使用すると、AndroidとiOSでこの向きの変化を検出できます。
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
alert("the orientation has changed");
}, false);onorientationchangeイベントがサポートされていない場合、イベントバインドはイベントになりますresize。
これは以前の答えを拡張したものです。私が見つけた最良の解決策は、CSS3メディアクエリが満たされた場合にのみ表示される無害なCSS属性を作成し、その属性のJSテストを行うことです。
たとえば、CSSでは次のようになります。
@media screen only and (orientation:landscape)
{
// Some innocuous rule here
body
{
background-color: #fffffe;
}
}
@media screen only and (orientation:portrait)
{
// Some innocuous rule here
body
{
background-color: #fffeff;
}
}次にJavaScriptに移動します（私はファンシーにjQueryを使用しています）。色の宣言は奇妙な場合があるので、他の何かを使用したいかもしれませんが、これは私がそれをテストするために見つけた最も簡単な方法です。次に、サイズ変更イベントを使用して、切り替えをピックアップします。すべてをまとめて：
function detectOrientation(){
// Referencing the CSS rules here.
// Change your attributes and values to match what you have set up.
var bodyColor = $("body").css("background-color");
if (bodyColor == "#fffffe") {
return "landscape";
} else
if (bodyColor == "#fffeff") {
return "portrait";
}
}
$(document).ready(function(){
var orientation = detectOrientation();
alert("Your orientation is " + orientation + "!");
$(document).resize(function(){
orientation = detectOrientation();
alert("Your orientation is " + orientation + "!");
});
});これの最良の部分は、私がこの回答を書いている時点では、デスクトップへの影響については何も影響を与えていないようです。なぜなら、それらは（一般に）ページの向きに関する引数を渡さない（そう思わない）ためです。
ここで私はデビッド・ウォルシュの記事に基づいて、発見された最良の方法は、（だモバイルデバイス上の向きの変化を検出します）
if ( window.matchMedia("(orientation: portrait)").matches ) {
alert("Please use Landscape!")
}説明：
Window.matchMedia（）は、メディアクエリルールを定義し、いつでもその有効性を確認できるネイティブメソッドです。
onchangeこのメソッドの戻り値にリスナーをアタッチすると便利です。例：
var mediaQueryRule = window.matchMedia("(orientation: portrait)")
mediaQueryRule.onchange = function(){ alert("screen orientation changed") }Android Chrome 「The Screen Orientation API」で使用しました
現在の方向を確認するには、console.log（screen.orientation.type）（およびscreen.orientation.angle）を呼び出します。
結果：縦向き| 縦二次| 風景プライマリー| 横向き
以下は私のコードですが、それが役に立てば幸いです：
var m_isOrientation = ("orientation" in screen) && (typeof screen.orientation.lock == 'function') && (typeof screen.orientation.unlock == 'function');
...
if (!isFullscreen()) return;
screen.orientation.lock('landscape-secondary').then(
function() {
console.log('new orientation is landscape-secondary');
},
function(e) {
console.error(e);
}
);//here's Promise
...
screen.orientation.unlock();screen.orientation.addEventListener("change", function(e) {
console.log(screen.orientation.type + " " + screen.orientation.angle);
}, false);iOSデバイス上のJavaScriptのウィンドウオブジェクトには、デバイスの回転を決定するために使用できるorientationプロパティがあります。以下は、さまざまな方向でのiOSデバイス（iPhone、iPad、iPodなど）のwindow.orientationの値を示しています。
このソリューションは、Androidデバイスでも機能します。古いバージョンのAndroidネイティブブラウザー（インターネットブラウザー）とChromeブラウザーをチェックインしました。
function readDeviceOrientation() {
if (Math.abs(window.orientation) === 90) {
// Landscape
} else {
// Portrait
}
}これは私が使用するものです。
function getOrientation() {
// if window.orientation is available...
if( window.orientation && typeof window.orientation === 'number' ) {
// ... and if the absolute value of orientation is 90...
if( Math.abs( window.orientation ) == 90 ) {
// ... then it's landscape
return 'landscape';
} else {
// ... otherwise it's portrait
return 'portrait';
}
} else {
return false; // window.orientation not available
}
}実装
window.addEventListener("orientationchange", function() {
// if orientation is landscape...
if( getOrientation() === 'landscape' ) {
// ...do your thing
}
}, false);<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>ユーザーがデバイスを縦向きモードに切り替えたかどうかを検出する方法があります screen.orientation
次のコードを使用してください。
screen.orientation.onchange = function () {
var type = screen.orientation.type;
if (type.match(/portrait/)) {
alert('Please flip to landscape, to use this app!');
}
}これで、onchangeユーザーがデバイスを裏返すと発生し、ポートレートモードを使用するとアラートがポップアップします。
注意すべき点の1つwindow.orientationはundefined、モバイルデバイスを使用していない場合に復帰することです。したがって、方向を確認するための適切な関数xはwindow.orientation次のようになります。
//check for orientation
function getOrientation(x){
if (x===undefined){
return 'desktop'
} else {
var y;
x < 0 ? y = 'landscape' : y = 'portrait';
return y;
}
}次のように呼び出します。
var o = getOrientation(window.orientation);
window.addEventListener("orientationchange", function() {
o = getOrientation(window.orientation);
console.log(o);
}, false);