青いやつの進捗日記。

メモとしてべんきょうのしんちょくをかいていきます。あとで自分が検索しやすいもん

ブラウザの向きとか、向き固定とかまわりを調べた(主にスマホ) Fullscreen APIとかScreen Orientation APIとか

スマホを画面の向きを縦向きにロックしている状態でブラウザは横向きに回転したりとか出来るのかを調べていた。

CSSのメディアクエリのorientation(画面の縦横比で判断)以外の方法を探す。(ロックしていると問答無用でportrait判定なので)

まず、ブラウザの角度を調べる方法。

blog.katsubemakito.net miku3.net

window.orientation
screen.orientation.angle

で調べられる。端末の向きをロックしておらず横に傾けて横向きにしたら90、縦向きに0となる。(ちなみにscreen.orientationはiOS Safariでは使えない。)
が、端末を縦にロックしていた場合、横に傾けてもブラウザも縦のまま、そして前述の角度判定はどちらも0になる。

なのでこれはどうにも出来ない。

JSで横向きにする

screen.orientation(Screen Orientation API)を使う。(ただ前述の通りiOSではそもそも使えないので既に目的は果たせてない)

developer.mozilla.org developer.mozilla.org qiita.com

具体的な方法は以下の通り

lab.syncer.jp code-boxx.com

まずFullscreen APIで全画面にして、(ちなみにFullscreen APIもiOS Safariでは使えない)

developer.mozilla.org

screen.orientation.lock('landscape')をする。

Androidではこれで画面を縦向きにロックしていてもブラウザを横向きに出来る。