บังคับให้เว็บไซต์แสดงในโหมดแนวนอนเท่านั้น


85

ฉันต้องการแสดงเว็บไซต์ของฉันในโหมดแนวนอนเท่านั้นเป็นไปได้หรือไม่ ไม่สำคัญว่าการวางแนวของอุปกรณ์ในมือผู้ใช้จะเป็นอย่างไร แต่เว็บไซต์จะอยู่ในโหมดแนวนอนเสมอ ฉันเคยเห็นแอพพลิเคชั่น iPhone ทำงานแบบนั้น แต่สามารถทำได้กับเว็บไซต์หรือไม่?


3
คำถามที่ดี แต่ฉันพนันได้เลยว่าคำตอบคือ "เป็นไปไม่ได้" แม้ว่าคุณจะสามารถโกงได้ก็ตาม: stackoverflow.com/a/4807047/615754
nnnnnn

ไม่จริง คุณสามารถจัดเรียงของปลอมได้โดยใช้การแปลง css แต่มันน่าเกลียดและฉันไม่คิดว่าจะมีทางรู้ว่ามันกลับหัวใน Android หรือไม่ ค่อนข้างแน่ใจว่ามีการพูดคุยเรื่องนี้มาก่อน
Dagg Nabbit

1
เป็นไปได้หรือไม่ที่จะบังคับให้เว็บไซต์มีความกว้างขั้นต่ำ: 320px ดังนั้นหากขนาดหน้าจอมีความละเอียดต่ำกว่าผู้ใช้จะต้องเลื่อนเพื่อดูไซต์แบบเต็ม หรือฉันสามารถซูมความกว้าง 240px เป็นเนื้อหา 320px ได้หรือไม่
coure2011

ฉันไม่แน่ใจว่าลิงก์นี้อาจมีประโยชน์กับคุณมากน้อยเพียงใด แต่คุณลักษณะล่าสุดของ [ม.ค. 2020] แนะนำ API ใหม่สำหรับการล็อกการวางแนวจาก W3C w3c.github.io/screen-orientation
Sarath Sajan

คำตอบ:


117

@Golmaal ตอบอย่างนี้จริงๆฉันแค่เป็นคนละเอียดมากขึ้น

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

คุณไม่สามารถควบคุมผู้ใช้ที่ย้ายการวางแนวได้ แต่อย่างน้อยคุณก็สามารถส่งข้อความถึงพวกเขาได้ ตัวอย่างนี้จะซ่อนกระดาษห่อหุ้มหากอยู่ในโหมดแนวตั้งและแสดงข้อความเตือนจากนั้นซ่อนข้อความเตือนในโหมดแนวนอนและแสดงแนวตั้ง

ฉันไม่คิดว่าคำตอบนี้จะดีไปกว่า @Golmaal เพียงแค่คำชมเท่านั้น หากคุณชอบคำตอบนี้อย่าลืมให้เครดิต @Golmaal

อัปเดต

เมื่อเร็ว ๆ นี้ฉันได้ร่วมงานกับ Cordova และปรากฎว่าคุณสามารถควบคุมได้เมื่อคุณเข้าถึงคุณสมบัติดั้งเดิม

การอัปเดตอื่น ๆ

ดังนั้นหลังจากปล่อย Cordova ในที่สุดมันก็แย่มาก จะดีกว่าถ้าใช้ React Native ถ้าคุณต้องการ JavaScript มันยอดเยี่ยมมากและฉันรู้ว่ามันไม่ใช่เว็บที่บริสุทธิ์ แต่เป็นประสบการณ์การใช้งานเว็บบนมือถือที่ล้มเหลว


ทำให้วันของฉัน! นี่เป็นสคริปต์ที่มีประโยชน์มากในการบังคับให้โหมดแนวนอนบนอุปกรณ์ขนาดเล็กส่งข้อความที่ดี
dhruvpatel

คุณได้รับเครดิตมากที่สุด;) + 1d สำหรับคำตอบที่อธิบายไว้อย่างดีและ @Golmaal ..
Hitesh Misro

มีประโยชน์จริงๆขอบคุณ! เป็นที่น่าสังเกตว่าสิ่งนี้ดูเหมือนจะไม่ได้ผลหากคุณติดไว้ในสไตล์ชีตแยกต่างหาก
อืม

คำตอบของคุณดีกว่าคำตอบที่คุณอ้างอิง คุณให้วิธีแก้ปัญหาจริงและแนะนำคำเตือนที่ใช้งานง่ายแทนที่จะเป็นสิ่งที่สร้างสรรค์และมีปัญหามากกว่า "คำตอบ" อื่น ๆ อาจเป็นแรงบันดาลใจให้คุณ แต่ไม่มากก็น้อยแค่สงสัยว่าดัง ๆ มันจะดีกว่านี้เนื่องจากความคิดเห็นที่กล่าวถึงการมีอยู่ของorientationคุณสมบัติกลุ่มเงื่อนไข
Vince

46

ในขณะที่ฉันกำลังรอคำตอบอยู่ที่นี่ฉันสงสัยว่าสามารถทำได้ผ่าน CSS หรือไม่:

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

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

35

ลองใช้วิธีนี้อาจเหมาะกับคุณมากกว่า

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

ซึ่งจะจัดการการหมุนเวียนแบบสม่ำเสมอโดยอัตโนมัติ


8
ฉลาด แต่ใช้ไม่ได้จริง หน้าส่วนใหญ่ไม่สามารถเข้าถึงได้เมื่อมีการหมุนเนื่องจากมีการหมุนเฉพาะเนื้อหาเท่านั้นไม่ใช่เบราว์เซอร์
Graham

3
สิ่งนี้จะทำลายภาพเคลื่อนไหวใด ๆ และอาจทำลายการตอบสนองบนอุปกรณ์เคลื่อนที่ของหน้าเว็บ
Wissam El-Kik

2

ฉันต้องเล่นกับความกว้างของคอนเทนเนอร์หลักของฉัน:

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

ความคิดที่ดี .. สิ่งประดิษฐ์ / เสียงรบกวนใด ๆ เมื่อสลับระหว่างแนวตั้ง / แนวนอน?
hko
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.