Pertanyaan memaksa situs web untuk ditampilkan hanya dalam mode lanskap


Saya ingin menunjukkan situs web saya dalam mode lanskap saja, apakah mungkin? Tidak peduli apa orientasi perangkat di tangan pengguna tetapi situs web akan selalu dalam mode lansekap. Saya telah melihat aplikasi iPhone bekerja seperti itu tetapi apakah ini bisa dilakukan untuk situs web?


76
2018-01-05 05:25


asal


Jawaban:


@Golmaal benar-benar menjawab ini, saya hanya menjadi sedikit lebih verbose.

<style type="text/css">
    #warning-message { display: none; }
    @media only screen and (orientation:portrait){
        #wrapper { display:none; }
        #warning-message { display:block; }
    }
    @media only screen and (orientation:landscape){
        #warning-message { display:none; }
    }
</style>

....

<div id="wrapper">
    <!-- your html for your website -->
</div>
<div id="warning-message">
    this website is only viewable in landscape mode
</div>

Anda tidak memiliki kontrol atas pengguna yang menggerakkan orientasi, namun setidaknya Anda dapat mengirim pesan kepada mereka. Contoh ini akan menyembunyikan pembungkus jika dalam mode potret dan menampilkan pesan peringatan dan kemudian menyembunyikan pesan peringatan dalam mode lansekap dan menampilkan potret.

Saya tidak berpikir jawaban ini lebih baik daripada @Golmaal, hanya pujian untuk itu. Jika Anda menyukai jawaban ini, pastikan untuk memberi @Golmaal kredit.

Memperbarui

Saya telah bekerja dengan Cordova banyak baru-baru ini dan ternyata Anda BISA mengendalikannya ketika Anda memiliki akses ke fitur asli.

Pembaruan Lain

Jadi setelah merilis Cordova, itu benar-benar mengerikan pada akhirnya. Lebih baik menggunakan sesuatu seperti React Native jika Anda ingin JavaScript. Ini benar-benar luar biasa dan saya tahu itu bukan murni web tetapi pengalaman web murni pada jenis seluler gagal.


104
2018-01-05 05:45



Sementara saya sendiri akan menunggu di sini untuk jawaban, saya ingin tahu apakah itu bisa dilakukan melalui CSS:

@media only screen and (orientation:portrait){
#wrapper {width:1024px}
}

@media only screen and (orientation:landscape){
#wrapper {width:1024px}
}

43
2018-01-05 05:32



Coba ini Mungkin lebih tepat untuk Anda

#container { display:block; }
@media only screen and (orientation:portrait){
  #container {  
    height: 100vw;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@media only screen and (orientation:landscape){
  #container {  
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     transform: rotate(0deg);
  }
}
<div id="container">
    <!-- your html for your website -->
    <H1>This text is always in Landscape Mode</H1>
</div>

Ini secara otomatis akan mengatur rotasi bahkan.


29
2018-03-13 17:25



Saya harus bermain dengan lebar kontainer utama saya:

html {
  @media only screen and (orientation: portrait) and (max-width: 555px) {
    transform: rotate(90deg);
    width: calc(155%);
    .content {
      width: calc(155%);
    }
  }
}

1