[解決済み] iOSでPhonegapを使用して、方向の変更を正しく検出するにはどうすればよいですか?
2022-04-20 01:23:29
質問
JQTouchの参考資料を探していて、下記のオリエンテストコードを見つけました。これは、モバイルSafariのiOSシミュレータでは正しく動作しますが、Phonegapでは正しく処理されません。私のプロジェクトでは、このテストページと同じ問題に遭遇しています。PhonegapでJavaScriptを使用して方向転換を感知する方法はありますか?
window.onorientationchange = function() {
/*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode with the screen turned to the
left, or landscape mode with the screen turned to the right. */
var orientation = window.orientation;
switch (orientation) {
case 0:
/* If in portrait mode, sets the body's class attribute to portrait. Consequently, all style definitions matching the body[class="portrait"] declaration
in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
document.body.setAttribute("class", "portrait");
/* Add a descriptive message on "Handling iPhone or iPod touch Orientation Events" */
document.getElementById("currentOrientation").innerHTML = "Now in portrait orientation (Home button on the bottom).";
break;
case 90:
/* If in landscape mode with the screen turned to the left, sets the body's class attribute to landscapeLeft. In this case, all style definitions matching the
body[class="landscapeLeft"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
document.body.setAttribute("class", "landscape");
document.getElementById("currentOrientation").innerHTML = "Now in landscape orientation and turned to the left (Home button to the right).";
break;
case -90:
/* If in landscape mode with the screen turned to the right, sets the body's class attribute to landscapeRight. Here, all style definitions matching the
body[class="landscapeRight"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
document.body.setAttribute("class", "landscape");
document.getElementById("currentOrientation").innerHTML = "Now in landscape orientation and turned to the right (Home button to the left).";
break;
}
}
解決方法は?
これは私がやっていることです。
function doOnOrientationChange() {
switch(window.orientation) {
case -90: case 90:
alert('landscape');
break;
default:
alert('portrait');
break;
}
}
window.addEventListener('orientationchange', doOnOrientationChange);
// Initial execution if needed
doOnOrientationChange();
2019年5月更新。
window.orientation
は非推奨の機能であり、ほとんどのブラウザでサポートされていません。
MDNによると
. その
orientationchange
イベントは
window.orientationと関連付けられています。
そのため、おそらく使用しない方がよいでしょう。
関連
-
Vueがechartsのtooltipにクリックイベントを追加するケーススタディ
-
Vueでルートネスティングを実装する例
-
Vueの「データを聴く」原則を解説
-
[解決済み] 要素外でのクリックを検出するにはどうすればよいですか?
-
JSクリックイベント - Uncaught TypeError: プロパティ 'onclick' に null を設定できません。
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] Javascriptで文字列の最後の文字を切り取るにはどうしたらいいですか?
-
[解決済み] jQueryを使用してハイパーリンクのhref属性を変更する方法
-
[解決済み] iOSのステータスバーの文字色を変更する方法
-
[解決済み】iOSアプリの名前を変更する方法は?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vueはランニングライト形式のテキストを水平方向にスクロールする機能を実装している
-
vueはopenlayersを使用してスカイマップとガオードマップをロードする
-
JavaScriptの配列共通メソッド解説
-
[解決済み】SyntaxError: JSONの位置1に予期しないトークンoがある。
-
[解決済み】Node.jsで "Cannot find module "エラーを解決するには?
-
[解決済み】TypeError: Router.use() はミドルウェアの関数を要求しているが、Object を取得した。
-
[解決済み】Node.js Error: Cannot find module express
-
[解決済み】 `string.split is not a function` というエラーの原因は何ですか?
-
[解決済み】 env: node: macにそのようなファイルやディレクトリはありません
-
Uncaught TypeError: null のプロパティ 'offsetHeight' を読み取れませんでした。