モバイルデバイス専用のウェブサイトを構築しています。特に、横向きモードで表示するのが最適なページが 1 つあります。
そのページにアクセスしているユーザーがポートレート モードでページを表示しているかどうかを検出する方法はありますか? もしそうなら、そのページはランドスケープ モードで表示するのが最適であることをユーザーに通知するメッセージを表示しますか? ユーザーがすでに横向きモードで表示している場合、メッセージは表示されません。
したがって、基本的には、サイトでビューポートの向きを検出し、向きがPortraitの場合、このページは横向きモードで表示するのが最適であることをユーザーに通知する警告メッセージを表示します。
if(window.innerHeight > window.innerWidth){
alert("Please use Landscape!");
}
jQuery Mobileには、このプロパティの変更を処理するイベントがあります...誰かが後でローテーションした場合に警告したい場合-orientationchange
また、グーグルした後、チェックアウトしてくださいwindow.orientation（これは度で測定されていると私は信じています...）
編集：モバイルデバイスでは、キーボードを開くと上記が失敗する可能性があるため、キーボードを開いた後でも適切な高さと幅を提供するscreen.availHeightandを使用できます。screen.availWidth
if(screen.availHeight > screen.availWidth){
alert("Please use Landscape!");
}
David Walshは、より適切で的確なアプローチを採用しています。
// 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;
}
}
より安定した解決策は、ウィンドウの代わりに画面を使用することだと思います。デスクトップコンピューターでブラウザーウィンドウのサイズを変更する場合、横向きまたは縦向きの両方になる可能性があるためです。
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");
}
}
いくつかの実験の後、方向認識デバイスを回転させると、常にブラウザー ウィンドウのresizeイベントがトリガーされることがわかりました。したがって、サイズ変更ハンドラーで次のような関数を呼び出すだけです。
function is_landscape() {
return (window.innerWidth > window.innerHeight);
}
$(window).on("orientationchange",function( event ){
alert(screen.orientation.type)
});
向きが変わるscreen.widthとiOS が更新されない。screen.heightAndroidwindow.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
}
}
次のコードを使用して、iOS だけでなく Android でもこの向きの変化を検出できます。
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
alert("the orientation has changed");
}, false);
onorientationchangeイベントがサポートされていない場合、バインドされたイベントはイベントになりresizeます。
オリエンテーションを（jsコードでいつでも）取得します
window.orientation
window.orientation戻ってきたとき、0または横向きモードになって180いる場合。90270
最新のブラウザを使用している場合、動作しない場合がありますwindow.orientation。その場合、角度を取得するために次のコードを使用します -
var orientation = window.screen.orientation.angle;
これはまだ実験的な技術です。ブラウザの互換性はこちらで確認できます
幅/高さの比較に基づいて向きを決定する別の方法:
var mql = window.matchMedia("(min-aspect-ratio: 4/3)");
if (mql.matches) {
orientation = 'landscape';
}
「サイズ変更」イベントで使用します。
window.addEventListener("resize", function() { ... });
//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");
}
}
道を案内してくれたtobyodaviesに感謝します。
モバイルデバイスの向きに基づいてアラートメッセージを表示するには、次のスクリプトを実装する必要があります。function setHeight() {
if(window.innerHeight > window.innerWidth){
alert("Please view in landscape");
}
これは、以前の回答を拡張したものです。私が見つけた最善の解決策は、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 + "!");
});
});
これの最も良い部分は、この回答を書いている時点では、デスクトップ インターフェイスに影響を与えていないように見えることです。なぜなら、それらは (一般的に) 向きの引数をページに渡さない (ように見える) からです。
screen.orientation.addEventListener("change", function(e) {
console.log(screen.orientation.type + " " + screen.orientation.angle);
}, false);
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();
iOS デバイス上の JavaScript のウィンドウ オブジェクトには、デバイスの回転を決定するために使用できる方向プロパティがあります。以下は、さまざまな向きでの iOS デバイス (iPhone、iPad、iPod など) の window.orientation の値を示しています。
このソリューションは、Android デバイスでも機能します。古いバージョンの Android ネイティブ ブラウザー (インターネット ブラウザー) と Chrome ブラウザーでチェックインしました。
function readDeviceOrientation() {
if (Math.abs(window.orientation) === 90) {
// Landscape
} else {
// Portrait
}
}
270 の代わりに、-90 (マイナス 90) にすることもできます。
ユーザーがデバイスをポートレート モードに切り替えたかどうかを検出する方法があります。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ユーザーがデバイスをひっくり返すと起動し、ユーザーがポートレート モードを使用しているときにアラートがポップアップします。
これは私が使用するものです。
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>