Buộc chế độ định hướng "ngang"

Tôi đang cố đặt chế độ "ngang" cho ứng dụng của mình vì ứng dụng của tôi hoàn toàn không được thiết kế cho chế độ "dọc". Làm thế nào tôi có thể làm điều đó?

Bây giờ có thể với tệp kê khai ứng dụng web HTML5. Xem bên dưới.

Câu trả lời ban đầu:

Bạn không thể khóa một trang web hoặc một ứng dụng web theo một hướng cụ thể. Nó đi ngược lại hành vi tự nhiên của thiết bị.

Bạn có thể phát hiện hướng thiết bị bằng các truy vấn phương tiện CSS3 như sau:

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

Hoặc bằng cách liên kết sự kiện thay đổi hướng JavaScript như sau:

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

Cập nhật vào ngày 12 tháng 11 năm 2014: Hiện có thể sử dụng tệp kê khai ứng dụng web HTML5.

Như đã giải thích trên html5rocks.com , bây giờ bạn có thể buộc chế độ định hướng bằng cách sử dụng một manifest.jsontệp.

Bạn cần đưa những dòng đó vào tệp json:

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

Và bạn cần đưa tệp kê khai vào tệp html của mình như sau:

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

Không chắc chắn chính xác những gì hỗ trợ trên tệp kê khai ứng dụng web cho chế độ khóa định hướng, nhưng Chrome chắc chắn ở đó. Sẽ cập nhật khi tôi có thông tin.

screen.orientation.lock('landscape');

Sẽ buộc nó thay đổi thành và ở chế độ ngang. Đã thử nghiệm trên Nexus 5.

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

Tôi sử dụng một số css như thế này (dựa trên thủ thuật 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;
  }
}

Tôi đã gặp vấn đề tương tự, đó là thiếu tệp tệp kê khai.json, nếu không tìm thấy trình duyệt quyết định với hướng là phù hợp nhất, nếu bạn không chỉ định tệp hoặc sử dụng đường dẫn sai.

Tôi đã sửa chỉ gọi đúng tệp kê khai.json trên tiêu đề html.

Tiêu đề html của tôi:

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

Và nội dung tệp 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"
  }
}

Để tạo biểu tượng và biểu tượng yêu thích của bạn, hãy sử dụng webtool này: https://realfavicongenerator.net/

Để tạo tệp kê khai của bạn, hãy sử dụng: https://tomitm.github.io/appmanifest/

PWA của tôi hoạt động tốt, hy vọng nó sẽ giúp!