iPhone Web アプリケーションで方向を縦モードにロックするにはどうすればよいですか?
-
05-07-2019 - |
質問
iPhone Web アプリケーションを構築しているのですが、方向を縦モードにロックしたいと考えています。これは可能ですか?これを行うための Web キット拡張機能はありますか?
これは Mobile Safari 用の HTML と JavaScript で書かれたアプリケーションであり、Objective-C で書かれたネイティブ アプリケーションではないことに注意してください。
解決
ビューポートの向きに基づいてCSSスタイルを指定できます。 body [orient = <!> quot; landscape <!> quot;]またはbody [orient = <!> quot; portrait <!> quot;]
でブラウザをターゲットにしますhttp://www.evotech.net / blog / 2007/07 / web-development-for-the-iphone /
ただし...
この問題に対するAppleのアプローチは、開発者が向きの変更に基づいてCSSを変更できるようにすることですが、向きの変更を完全に防ぐことではありません。他の場所で同様の質問を見つけました:
http:// ask。 metafilter.com/99784/How-can-I-lock-iPhone-orientation-in-Mobile-Safari
他のヒント
これはかなりハッキーなソリューションですが、少なくとも何か(?)です。アイデアは、CSS変換を使用して、ページのコンテンツを準ポートレートモードに回転させることです。始めるためのJavaScript(jQueryで表現された)コードを次に示します。
$(document).ready(function () {
function reorient(e) {
var portrait = (window.orientation % 180 == 0);
$("body > div").css("-webkit-transform", !portrait ? "rotate(-90deg)" : "");
}
window.onorientationchange = reorient;
window.setTimeout(reorient, 0);
});
このコードでは、ページのコンテンツ全体がbody要素内のdiv内にあると想定しています。そのdivを横向きモードで90度回転-縦向きに戻します。
読者への演習として左:divは中心点を中心に回転するため、完全に正方形でない限り、おそらく位置を調整する必要があります。
また、見苦しい視覚的な問題もあります。向きを変更すると、Safariがゆっくりと回転し、トップレベルのdivが90度異なる位置にスナップします。さらに楽しくするには、追加
body > div { -webkit-transition: all 1s ease-in-out; }
CSSに。デバイスが回転すると、Safariが回転し、ページのコンテンツが回転します。おもしろい!
この答えはまだありませんが、「将来の世代」のために投稿します。いつか CSS の @viewport ルールを使用してこれができるようになれば幸いです。
@viewport {
orientation: portrait;
}
仕様(準備中):
https://drafts.csswg.org/css-device-adapt/#orientation-desc
MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/orientation
MDN ブラウザの互換性テーブルと次の記事に基づくと、IE と Opera の特定のバージョンではサポートがあるようです。
http://menacingcloud.com/?c=cssViewportOrMetaTag
この JS API 仕様も関連しているようです。
https://w3c.github.io/screen-orientation/
提案されたものであればそれが可能であるため、私はそれを想定していました @viewport
ルール、設定することで可能になるということ orientation
のビューポート設定で meta
タグを付けましたが、これまでのところ成功していません。
状況が改善されたら、お気軽にこの回答を更新してください。
html5ゲームでは次のコードが使用されました。
$(document).ready(function () {
$(window)
.bind('orientationchange', function(){
if (window.orientation % 180 == 0){
$(document.body).css("-webkit-transform-origin", "")
.css("-webkit-transform", "");
}
else {
if ( window.orientation > 0) { //clockwise
$(document.body).css("-webkit-transform-origin", "200px 190px")
.css("-webkit-transform", "rotate(-90deg)");
}
else {
$(document.body).css("-webkit-transform-origin", "280px 190px")
.css("-webkit-transform", "rotate(90deg)");
}
}
})
.trigger('orientationchange');
});
メディアクエリを使用して画面を回転させるこのCSSのみの方法を思いつきました。クエリは、ここで見つけた画面サイズに基づいています。 480ピクセル以上または480ピクセル以下の高さのデバイスはほとんどないため、480ピクセルは良いように見えました。
@media (max-height: 480px) and (min-width: 480px) and (max-width: 600px) {
html{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
width: 320px; /*this is the iPhone screen width.*/
position: absolute;
top: 100%;
left: 0
}
}
Screen.lockOrientation()
はこの問題を解決しますが、サポートは当時一般的ではありませんでした(2017年4月):
https://www.w3.org/TR/screen-orientation/
https://developer.mozilla.org/en -US / docs / Web / API / Screen.lockOrientation
携帯電話をポートレートモードに戻すようにユーザーに伝えるというアイデアが気に入っています。
ここで言及されているように:
新しい未来に、すぐに使えるソリューションが追加されるかもしれません... 2015年5月の場合 それを行う実験的な機能があります。 ただし、Firefox 18以降、IE11以降、Chrome 38以降でのみ動作します。 ただし、まだOperaまたはSafariでは動作しません。 互換性のあるブラウザの現在のコードは次のとおりです。var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
lockOrientation("landscape-primary");
// CSS hack to prevent layout breaking in landscape
// e.g. screens larger than 320px
html {
width: 320px;
overflow-x: hidden;
}
これ、または同様のCSSソリューションは、少なくともそれが目的であればレイアウトを保持します。
ルートソリューションは、デバイスの機能を制限しようとするのではなく、機能を考慮しています。デバイスが適切な制限を許可しない場合、設計が本質的に不完全であるため、単純なハックが最善の策です。シンプルなほど良い。
コーヒーが必要な場合。
$(window).bind 'orientationchange', ->
if window.orientation % 180 == 0
$(document.body).css
"-webkit-transform-origin" : ''
"-webkit-transform" : ''
else
if window.orientation > 0
$(document.body).css
"-webkit-transform-origin" : "200px 190px"
"-webkit-transform" : "rotate(-90deg)"
else
$(document.body).css
"-webkit-transform-origin" : "280px 190px"
"-webkit-transform" : "rotate(90deg)"
方向の変更が有効になるのを防ぐことはできませんが、他の回答で述べられているように、変更をエミュレートすることはできません。
最初にデバイスの向きまたは向きを検出し、JavaScriptを使用して、ラッピング要素にクラス名を追加します(この例ではbodyタグを使用します)。
function deviceOrientation() {
var body = document.body;
switch(window.orientation) {
case 90:
body.classList = '';
body.classList.add('rotation90');
break;
case -90:
body.classList = '';
body.classList.add('rotation-90');
break;
default:
body.classList = '';
body.classList.add('portrait');
break;
}
}
window.addEventListener('orientationchange', deviceOrientation);
deviceOrientation();
デバイスが横向きの場合、CSSを使用してボディの幅をビューポートの高さに設定し、ボディの高さをビューポートの幅に設定します。そして、<!>#8217;変換の原点を設定して、<!>#8217;再実行します。
@media screen and (orientation: landscape) {
body {
width: 100vh;
height: 100vw;
transform-origin: 0 0;
}
}
ここで、body要素の向きを変えて、スライドさせて(翻訳)所定の位置にします。
body.rotation-90 {
transform: rotate(90deg) translateY(-100%);
}
body.rotation90 {
transform: rotate(-90deg) translateX(-100%);
}
@Grumdrigの回答からヒントを得たもので、使用された指示の一部が機能しないため、他の人が必要に応じて次のスクリプトを提案します。
$(document).ready(function () {
function reorient(e) {
var orientation = window.screen.orientation.type;
$("body > div").css("-webkit-transform", (orientation == 'landscape-primary' || orientation == 'landscape-secondary') ? "rotate(-90deg)" : "");
}
$(window).on("orientationchange",function(){
reorient();
});
window.setTimeout(reorient, 0);
});
チュートリアルと作業については、こちらをクリックしてください私のウェブサイトからの例。
実際にPhoneGapを使用している場合を除き、jQuery Mobile Screen Orientationを見るためだけにハックを使用する必要も、PhoneGapを使用する必要もありません。
2015年にこの作業を行うには、次が必要です。
- Cordova(どのバージョンでも4.0より上が良い)
- PhoneGap(PhoneGapを使用することもできます。プラグインは互換性があります)
そして、Cordovaのバージョンに応じて、これらのプラグインのいずれか:
- net.yoik.cordova.plugins.screenorientation(Cordova <!> lt; 4)
cordovaプラグインはnet.yoik.cordova.plugins.screenorientationを追加します
- cordovaプラグインはcordova-plugin-screen-orientationを追加します(Cordova <!> gt; = 4)
cordovaプラグインはcordova-plugin-screen-orientationを追加します
画面の向きをロックするには、次の関数を使用します。
screen.lockOrientation('landscape');
ロックを解除するには:
screen.unlockOrientation();
可能な向き:
-
portrait-primary 向きはプライマリポートレートモードです。
-
portrait-secondary 向きはセカンダリポートレートモードです。
-
landscape-primary 向きはプライマリランドスケープモードです。
-
landscape-secondary 方向はセカンダリランドスケープモードです。
-
portrait 向きは、縦一次または縦二次(センサー)のいずれかです。
-
landscape 向きは、landscape-primaryまたはlandscape-secondary(センサー)のいずれかです。