85

Web sitemi yalnızca yatay modda göstermek istiyorum, mümkün mü? Kullanıcının elindeki cihazın yönünün ne olduğu önemli değildir ancak web sitesi her zaman yatay modda olacaktır. İPhone uygulamasının böyle çalıştığını gördüm ama bu bir web sitesi için yapılabilir mi?

javascript html mobile-browser

— coure2011
kaynak

3

Güzel soru, ama iddiaya girerim cevabın "Mümkün değil", ancak bir çeşit hile yapabilirsiniz: stackoverflow.com/a/4807047/615754 .

— nnnnnn

Pek sayılmaz. Css dönüşümlerini kullanarak sahte yapabilirsiniz ama bu çirkin ve androidde ters dönüp dönmediğini bilmenin bir yolu olduğunu sanmıyorum. Bunun daha önce burada tartışıldığından oldukça eminim.

— Dagg Nabbit

1

web sitesini min-width: 320px değerine sahip olmaya zorlamak mümkün müdür? bu nedenle, ekran boyutu daha düşük çözünürlüklü ise, kullanıcının sitenin tamamını görüntülemek için ekranı kaydırması gerekecektir. Veya 240px genişliğini 320px içeriğe yakınlaştırabilir miyim?

— coure2011

Bu bağlantının size ne kadar yardımcı olabileceğinden emin değilim, ancak en son [Ocak 2020] özellikleri, W3C'den

— Sarath Sajan

117

@Golmaal bunu gerçekten yanıtladı, ben sadece biraz daha ayrıntılı oluyorum.

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

Yönü hareket ettiren kullanıcı üzerinde hiçbir kontrolünüz yoktur, ancak en azından onlara mesaj gönderebilirsiniz. Bu örnek, dikey moddaysa sarıcıyı gizleyecek ve uyarı mesajını gösterecek ve ardından manzara modunda uyarı mesajını gizleyecek ve portreyi gösterecektir.

Bu cevabın @Golmaal'dan daha iyi olduğunu sanmıyorum, sadece ona bir iltifat. Bu cevabı beğendiyseniz @Golmaal'a övgü verdiğinizden emin olun.

Güncelleme

Son zamanlarda Cordova ile çok çalışıyorum ve yerel özelliklere erişiminiz olduğunda onu kontrol edebileceğiniz ortaya çıktı.

Başka Bir Güncelleme

Yani Cordova'yı piyasaya sürdükten sonra sonunda gerçekten korkunç. JavaScript istiyorsanız React Native gibi bir şey kullanmak daha iyidir. Gerçekten harika ve saf web olmadığını biliyorum, ancak mobil cihazlardaki saf web deneyimi başarısız oldu.

— Jason Sebring
kaynak

günümü şenlendirdin! Bu, küçük cihazlarda manzara modunu güzel bir mesaj koyarak zorlamak için gerçekten kullanışlı bir betiktir.

— dhruvpatel

yine de kredinin çoğunu aldınız;) İyi tanımlanmış cevabınız için + 1d ve @Golmaal ..

— Hitesh Misro

Gerçekten faydalı, teşekkürler! Ayrı bir stil sayfasına yapıştırırsanız, bunun işe yaramayacağını belirtmekte fayda var.

— Mmm

Cevabınız referans verdiğinizden daha iyi. Daha yaratıcı ve sorunlu bir şey yerine gerçek bir çözüm sunar ve kolayca uygulanan bir uyarı önerirsiniz. Diğer "cevap" size ilham vermiş olabilir, ancak aşağı yukarı yüksek sesle merak etmekti. orientationKoşullu grup özelliğinin varlığından söz eden bir yorum olarak daha iyi olurdu .

— Vince

46

Ben kendim burada bir cevap beklerken, CSS ile yapılıp yapılamayacağını merak ediyorum:

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

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

— Golmaal
kaynak

35

Bunu dene, senin için daha uygun olabilir

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

Snippet'i genişlet

Bu otomatik olarak eşit dönüşü yönetecektir.

— Bay A
kaynak

8

Zekice, ama gerçekten işe yaramıyor. Sayfanın çoğu döndürüldüğünde erişilemez çünkü gerçek tarayıcı değil yalnızca içerik döndürülür.

— Graham

3

Bu, herhangi bir animasyonu bozar ve muhtemelen sayfanın mobil duyarlılığını bozar.

— Wissam El-Kik

2

Ana kaplarımın genişlikleriyle oynamak zorunda kaldım:

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

— Kraken
kaynak

güzel fikir .. portre / manzara arasında geçiş yaparken herhangi bir kusur / gürültü var mı?

— hko

web sitesini yalnızca yatay modda gösterilmeye zorlamak

@Golmaal bunu gerçekten yanıtladı, ben sadece biraz daha ayrıntılı oluyorum.