スマホを横にした時、横表示はせず縦表示を維持したまま表示したいです。
jsやphpでできるのでしょうか。
ご教示のほどよろしくお願いいたします。
mhashiが👍を押しています
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答1件
0
ベストアンサー
調べていたら実現している例があったので貼っておきます。
フルスクリーンにすると画面回転ロックが効くようになるようですね。
説明(英語) Introducing the Screen Orientation API
デモ Screen Orientation API Demo by Aurelio De Rosa
かいつまんで私なりにコードを書くとこんな感じです。
lang
1<!DOCTYPE html> 2<html> 3<!--省略--> 4<body> 5 <p><button id="lock">Click</button></p> 6</body> 7</html>
lang
1function requestFullScreen(elem) { 2 if (elem.requestFullScreen) { 3 elem.requestFullScreen(); 4 } 5 else if (elem.webkitRequestFullScreen) { 6 elem.webkitRequestFullScreen(); 7 } 8 else if (elem.mozRequestFullScreen) { 9 elem.mozRequestFullScreen(); 10 } 11 else if (elem.msRequestFullScreen) { 12 elem.msRequestFullScreen(); 13 } 14} 15 16function lockOrientation(mode) { 17 if (screen.orientation.lock) { 18 screen.orientation.lock(mode); 19 } 20 else if (screen.lockOrientation) { 21 screen.lockOrientation(mode); 22 } 23 else if (screen.webkitLockOrientation) { 24 screen.webkitLockOrientation(mode); 25 } 26 else if (screen.mozLockOrientation) { 27 screen.mozLockOrientation(mode); 28 } 29 else if (screen.msLockOrientation) { 30 screen.msLockOrientation(mode); 31 } 32} 33 34document.addEventListener("DOMContentLoaded", function(){ 35 36 document.getElementById("lock").onclick = function(){ 37 // html全体をフルスクリーン化します 38 requestFullScreen(document.documentElement); 39 // 縦画面に固定します 40 // screen.orientation.lockは即座に効くようですが、 41 // screen.lockOrientation系は少し間を開けないと有効にならないようです 42 setTimeout(function(){ 43 lockOrientation("portrait"); 44 }, 1); 45 46 return false; 47 }; 48}, false);
ちなみに、CSS3にはメディアクエリに landscape か portrait かで与えるスタイルを変える仕組みがあります。
JavaScriptには回転を検知して発火するイベントがあります。
lang
1@media screen and (orientation: landscape) { 2} 3@media screen and (orientation: portrait) { 4}
lang
1window.addEventListener("orientationchange", function(){ 2 var deg; 3 switch (window.orientation) { 4 case -90: 5 deg = 90; break; 6 case 0: 7 deg = 0; break; 8 case 90: 9 deg = -90; break; 10 case 180: 11 deg = 180; break; 12 } 13 document.documentElement.style.transform = "rotate(" + deg + "deg)"; 14}, false);
投稿2015/04/26 17:09
総合スコア870
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/04/27 00:14