ฉันต้องการแสดงเว็บไซต์ของฉันในโหมดแนวนอนเท่านั้นเป็นไปได้หรือไม่ ไม่สำคัญว่าการวางแนวของอุปกรณ์ในมือผู้ใช้จะเป็นอย่างไร แต่เว็บไซต์จะอยู่ในโหมดแนวนอนเสมอ ฉันเคยเห็นแอพพลิเคชั่น iPhone ทำงานแบบนั้น แต่สามารถทำได้กับเว็บไซต์หรือไม่?
ฉันต้องการแสดงเว็บไซต์ของฉันในโหมดแนวนอนเท่านั้นเป็นไปได้หรือไม่ ไม่สำคัญว่าการวางแนวของอุปกรณ์ในมือผู้ใช้จะเป็นอย่างไร แต่เว็บไซต์จะอยู่ในโหมดแนวนอนเสมอ ฉันเคยเห็นแอพพลิเคชั่น iPhone ทำงานแบบนั้น แต่สามารถทำได้กับเว็บไซต์หรือไม่?
คำตอบ:
<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 มันยอดเยี่ยมมากและฉันรู้ว่ามันไม่ใช่เว็บที่บริสุทธิ์ แต่เป็นประสบการณ์การใช้งานเว็บบนมือถือที่ล้มเหลว
orientation
คุณสมบัติกลุ่มเงื่อนไข
ในขณะที่ฉันกำลังรอคำตอบอยู่ที่นี่ฉันสงสัยว่าสามารถทำได้ผ่าน CSS หรือไม่:
@media only screen and (orientation:portrait){
#wrapper {width:1024px}
}
@media only screen and (orientation:landscape){
#wrapper {width:1024px}
}
ลองใช้วิธีนี้อาจเหมาะกับคุณมากกว่า
#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>
ซึ่งจะจัดการการหมุนเวียนแบบสม่ำเสมอโดยอัตโนมัติ
ฉันต้องเล่นกับความกว้างของคอนเทนเนอร์หลักของฉัน:
html {
@media only screen and (orientation: portrait) and (max-width: 555px) {
transform: rotate(90deg);
width: calc(155%);
.content {
width: calc(155%);
}
}
}