アプリケーションが「ポートレート」モード用に設計されていないため、アプリケーションに「ランドスケープ」モードを強制しようとしています。どうやってやるの?
アプリケーションが「ポートレート」モード用に設計されていないため、アプリケーションに「ランドスケープ」モードを強制しようとしています。どうやってやるの?
回答:
HTML5ウェブアプリマニフェストで可能になりました。下記参照。
元の答え:
WebサイトまたはWebアプリケーションを特定の方向にロックすることはできません。これは、デバイスの自然な動作に反します。
次のようなCSS3メディアクエリを使用して、デバイスの向きを検出できます。
@media screen and (orientation:portrait) {
// CSS applied when the device is in portrait mode
}
@media screen and (orientation:landscape) {
// CSS applied when the device is in landscape mode
}
または、次のようにJavaScriptの向き変更イベントをバインドします。
document.addEventListener("orientationchange", function(event){
switch(window.orientation)
{
case -90: case 90:
/* Device is in landscape mode */
break;
default:
/* Device is in portrait mode */
}
});
2014年11月12日の更新:HTML5webappマニフェストで可能になりました。
html5rocks.comで説明されているように、manifest.json
ファイルを使用して方向モードを強制できるようになりました。
これらの行をjsonファイルに含める必要があります。
{
"display": "standalone", /* Could be "fullscreen", "standalone", "minimal-ui", or "browser" */
"orientation": "landscape", /* Could be "landscape" or "portrait" */
...
}
そして、次のようにマニフェストをhtmlファイルに含める必要があります。
<link rel="manifest" href="manifest.json">
ロック方向モードのWebアプリマニフェストでサポートされているものが正確にはわかりませんが、Chromeは間違いなく存在します。情報が入り次第更新します。
screen.orientation.lock('landscape');
強制的にランドスケープモードに変更し、そのままにします。Nexus5でテスト済み。
私はこのようないくつかのCSSを使用します(CSSのトリックに基づいています):
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
html {
transform: rotate(-90deg);
transform-origin: left top;
width: 100vh;
height: 100vw;
overflow-x: hidden;
position: absolute;
top: 100%;
left: 0;
}
}
landscape
とportrait
し、期待どおりに動作します@media screen and (orientation: portrait)
portrait
(に切り替わるようにlandscape
)のときに回転を適用する必要があります。
私は同じ問題を抱えていました、それは不足しているmanifest.jsonファイルでした、見つからない場合、ファイルを指定しないか間違ったパスを使用する場合、ブラウザは向きで決定するのが最適です。
htmlヘッダーでmanifest.jsonを正しく呼び出すだけで修正しました。
私のhtmlヘッダー:
<meta name="application-name" content="App Name">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="manifest" href="manifest.json">
<meta name="msapplication-starturl" content="/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#">
<meta name="msapplication-TileColor" content="#">
<meta name="msapplication-config" content="browserconfig.xml">
<link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#ffffff">
<link rel="shortcut icon" href="favicon.ico">
そしてmanifest.jsonファイルの内容:
{
"display": "standalone",
"orientation": "portrait",
"start_url": "/",
"theme_color": "#000000",
"background_color": "#ffffff",
"icons": [
{
"src": "android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
}
ファビコンとアイコンを生成するには、次のWebツールを使用します:https://realfavicongenerator.net/
マニフェストファイルを生成するには、https://tomitm.github.io/appmanifest/を使用します 。
私のPWAはうまく機能します、それが役立つことを願っています!