บังคับใช้โหมดการวางแนว "แนวนอน"


93

ฉันพยายามบังคับใช้โหมด "แนวนอน" สำหรับแอปพลิเคชันของฉันเนื่องจากแอปพลิเคชันของฉันไม่ได้ออกแบบมาสำหรับโหมด "แนวตั้ง" ฉันจะทำเช่นนั้นได้อย่างไร?

คำตอบ:


95

ขณะนี้สามารถทำได้ด้วยไฟล์ Manifest ของเว็บแอป HTML5 ดูด้านล่าง


คำตอบเดิม:

คุณไม่สามารถล็อกเว็บไซต์หรือเว็บแอปพลิเคชันในแนวเฉพาะได้ ขัดต่อพฤติกรรมตามธรรมชาติของอุปกรณ์

คุณสามารถตรวจจับการวางแนวอุปกรณ์ด้วยคิวรี่สื่อ CSS3 ดังนี้:

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

หรือโดยการผูกเหตุการณ์การเปลี่ยนแปลงการวางแนวของ JavaScript ดังนี้:

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

อัปเดตเมื่อวันที่ 12 พฤศจิกายน 2557: ขณะนี้สามารถใช้งานไฟล์ Manifest ของเว็บ HTML5 ได้แล้ว

ตามที่อธิบายไว้ในhtml5rocks.comตอนนี้คุณสามารถบังคับโหมดการวางแนวโดยใช้manifest.jsonไฟล์ได้

คุณต้องรวมบรรทัดเหล่านั้นลงในไฟล์ json:

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

และคุณต้องรวมรายการไว้ในไฟล์ html ของคุณดังนี้:

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

ไม่แน่ใจว่าการสนับสนุนในรายการเว็บแอปสำหรับการล็อกโหมดการวางแนว แต่ Chrome อยู่ที่นั่นแน่นอน จะอัปเดตเมื่อฉันมีข้อมูล


1
ใช่ webapps ด้วย แม้ว่าคุณจะ "บันทึก" เว็บไซต์ของคุณไว้ที่หน้าจอหลักบน iPhone หรือ iPad แต่เว็บแอปจะเปลี่ยนการวางแนว
Rémi Breton

2
ตาม caniuse.com สามารถใช้ Manifest ได้ตั้งแต่ Android 4.1 ดูcaniuse.com/#feat=offline-apps
Rémi Breton

1
ฉันจะทราบได้อย่างไรว่ามีการเรียกรายการหรือไม่ มันใช้งานไม่ได้สำหรับฉันและไม่มีสิ่งใดแสดงให้โหลดในเครือข่ายของเครื่องมือการพัฒนาของฉันแม้ว่าไฟล์ Manifest จะอยู่ที่เดียวกับ index.html ที่ลิงก์
Ian S

3
ใน Chrome ตอนนี้คุณสามารถตรวจสอบแท็บ "แอปพลิเคชัน" ในโหมดตรวจสอบได้แล้วจะมีหน้า "รายการ" พร้อมลิงก์โดยตรงไปยังไฟล์ json ของคุณและข้อมูลเกี่ยวกับมัน
drskullster

1
@ RémiBreton - คุณยังคงค้นหาข้อมูลนั้นอยู่คุณจึงอัปเดตหรือไม่? เราอดทนรอมาหลายปีแล้ว!
ashleedawg

47
screen.orientation.lock('landscape');

จะบังคับให้เปลี่ยนเป็นและอยู่ในโหมดแนวนอน ทดสอบกับ Nexus 5

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


3
ไม่ทำงานบน Android โดยใช้อินเทอร์เน็ตเบราว์เซอร์เริ่มต้น (ไม่ใช่ Chrome) - มีความคิดอย่างไร
Antonios Tsimourtos

7
ไม่ได้ใช้สำหรับ Safari (iOS และ macOS): caniuse.com/#feat=screen-orientation
MBach

4
เพียงแค่บันทึกสั้น ๆ สิ่งนี้จะใช้ได้หลังจากเข้าสู่โหมดเต็มหน้าจอเท่านั้น
Thane Brimhall

2
Mozilla ไม่สนับสนุนวิธีนี้: developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientationนอกจากนี้ยังมีความเข้ากันได้ของเบราว์เซอร์ที่แย่มาก
Fernando Garcia

1
สิ่งนี้ยังใช้ไม่ได้ในโหมดเต็มหน้าจอใน chrome: |
Shamshirsaz.avid

24

ฉันใช้ css แบบนี้ (ตามเทคนิค 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;
  }
}

3
ฉันใช้คำตอบนี้ .. สิ่งที่ฉันต้องทำคือเปลี่ยนการสืบค้นสื่อจากlandscapeเป็นportraitและมันทำงานได้ตามที่คาดไว้@media screen and (orientation: portrait)
ymz

แก้ไขคำตอบเพื่อช่วยเหลือคนในอนาคต ควรใช้การหมุนเมื่ออยู่ในโหมดปัจจุบันportrait(เพื่อที่จะเปลี่ยนเป็นlandscape)
lfarroco

ขอบคุณ. ฉันกำลังมองหาสิ่งนี้
ตกอับ

ฉันจะใช้เฉพาะในหน้าเดียวผ่าน page-id-xxx ได้อย่างไร
โฮเมอร์

1
ขอบคุณสำหรับสิ่งนี้! ฉันพบว่าคุณต้องเปลี่ยนทุกๆvhto vwและvwto vhในไฟล์ CSS ทั้งหมด (ในโหมดแนวตั้ง) ... ดังนั้นถ้าใครไม่สำเร็จอาจเป็นเพราะมัน
tomer raitz

0

ฉันมีปัญหาเดียวกันมันเป็นไฟล์ manifest.json ที่หายไปหากไม่พบเบราว์เซอร์ตัดสินใจด้วยการวางแนวที่เหมาะสมที่สุดหากคุณไม่ระบุไฟล์หรือใช้เส้นทางที่ไม่ถูกต้อง

ฉันแก้ไขเพียงแค่เรียก manifest.json อย่างถูกต้องบนส่วนหัว html

ส่วนหัว html ของฉัน:

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

และเนื้อหาไฟล์ 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"
  }
}

ในการสร้าง Favicons และไอคอนของคุณให้ใช้ webtool นี้: https://realfavicongenerator.net/

ในการสร้างไฟล์รายการของคุณให้ใช้: https://tomitm.github.io/appmanifest/

กปภ. ของฉันใช้งานได้ดีหวังว่าจะช่วยได้!

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