スマホを横にした時、横表示を無効にしたい

スマホを横にした時、横表示はせず縦表示を維持したまま表示したいです。
jsやphpでできるのでしょうか。
ご教示のほどよろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

調べていたら実現している例があったので貼っておきます。
フルスクリーンにすると画面回転ロックが効くようになるようですね。

説明（英語） 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);