Paksa mode orientasi "lanskap"

91

Saya mencoba memaksakan mode "lanskap" untuk aplikasi saya karena aplikasi saya sama sekali tidak dirancang untuk mode "potret". Bagaimana saya bisa melakukan itu?

javascript device-orientation pengguna1599537
sumber

Jawaban:

93

Sekarang dapat dilakukan dengan manifes aplikasi web HTML5. Lihat di bawah.

Jawaban asli:

Anda tidak dapat mengunci situs web atau aplikasi web dalam orientasi tertentu. Ini bertentangan dengan perilaku alami perangkat.

Anda dapat mendeteksi orientasi perangkat dengan kueri media CSS3 seperti ini:

@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
}

Atau dengan mengikat acara perubahan orientasi JavaScript seperti ini:

document.addEventListener("orientationchange", function(event){
    switch(window.orientation) 
    {  
        case -90: case 90:
            /* Device is in landscape mode */
            break; 
        default:
            /* Device is in portrait mode */
    }
});

Pembaruan pada 12 November 2014: Sekarang dapat dilakukan dengan manifes aplikasi web HTML5.

Seperti yang dijelaskan di html5rocks.com , Anda sekarang dapat memaksa mode orientasi menggunakan manifest.jsonfile.

Anda perlu memasukkan baris tersebut ke dalam file json:

{
    "display":      "standalone", /* Could be "fullscreen", "standalone", "minimal-ui", or "browser" */
    "orientation":  "landscape", /* Could be "landscape" or "portrait" */
    ...
}

Dan Anda perlu menyertakan manifes ke dalam file html Anda seperti ini:

<link rel="manifest" href="manifest.json">

Tidak yakin apa dukungan yang ada di manifes aplikasi web untuk mode orientasi penguncian, tetapi Chrome pasti ada di sana. Akan diperbarui ketika saya memiliki info.

Rémi Breton
sumber
1
Ya, aplikasi web juga. Meskipun Anda "menyimpan" situs web Anda ke layar beranda di iPhone atau iPad, aplikasi web akan mengubah orientasinya.
Rémi Breton
2
Sesuai caniuse.com, manifes dapat digunakan sejak Android 4.1. Lihat caniuse.com/#feat=offline-apps
Rémi Breton
1
Bagaimana saya bisa tahu jika manifes dipanggil? Ini tidak berfungsi untuk saya dan tidak ada acara yang dimuat di Jaringan alat pengembangan saya meskipun manifes berada di tempat yang sama dengan index.html tempat ia ditautkan.
Ian S
3
Di Chrome, Anda sekarang dapat memeriksa tab "Aplikasi" dalam mode Inspeksi, ada halaman "Manifes" dengan tautan langsung ke file json Anda dan info tentangnya.
drskullster
1
@ RémiBreton - apakah Anda masih mencari info itu, jadi Anda dapat memperbarui? Kami telah menunggu dengan sabar selama bertahun
ashleedawg
46 
screen.orientation.lock('landscape');

Akan memaksanya untuk berubah dan tetap dalam mode lanskap. Diuji di Nexus 5.

http://www.w3.org/TR/screen-orientation/#examples

Linggis
sumber
3
Tidak berfungsi di Android menggunakan browser internet default (bukan chrome) - ada ide?
Antonios Tsimourtos
6
Tidak diimplementasikan untuk Safari (iOS dan MacOS): caniuse.com/#feat=screen-orientation
MBach
3
Sekadar catatan singkat, ini hanya berfungsi setelah memasuki mode layar penuh.
Thane Brimhall
2
Metode ini tidak disarankan oleh Mozilla: developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation Juga memiliki kompatibilitas browser yang sangat buruk
Fernando Garcia
1
Ini bahkan tidak berfungsi dalam mode layar penuh di chrome: |
Shamshirsaz.Navid
23

Saya menggunakan beberapa css seperti ini (berdasarkan trik 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;
  }
}
pomber
sumber
3
Saya menggunakan jawaban ini .. yang harus saya lakukan adalah mengubah kueri media dari landscapemenjadi portraitdan berfungsi seperti yang diharapkan@media screen and (orientation: portrait)
ymz
Mengedit jawaban untuk membantu orang-orang di masa depan. Rotasi harus diterapkan ketika mode saat ini portrait(sehingga dapat beralih ke landscape).
lfarroco
Terima kasih. Saya telah mencari sesuatu seperti ini.
diunggulkan
Bagaimana saya bisa menerapkannya hanya pada satu halaman melalui page-id-xxx?
Homer
0

Saya memiliki masalah yang sama, itu adalah file manifest.json yang hilang, jika tidak ditemukan browser memutuskan dengan orientasi yang paling sesuai, jika Anda tidak menentukan file atau menggunakan jalur yang salah.

Saya memperbaiki hanya memanggil manifest.json dengan benar di header html.

Header html saya:

<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">

Dan konten file 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"
  }
}

Untuk membuat favicon dan ikon Anda, gunakan alat web ini: https://realfavicongenerator.net/

Untuk membuat file manifes Anda, gunakan: https://tomitm.github.io/appmanifest/

PWA saya Berfungsi dengan baik, semoga membantu!

Miguel Montes de Oca
sumber