Tôi chỉ muốn hiển thị trang web của mình ở chế độ ngang, nó có thể di động được không? Không quan trọng hướng của thiết bị trong tay người dùng là gì nhưng trang web sẽ luôn ở chế độ ngang. Tôi đã thấy ứng dụng iPhone hoạt động như vậy nhưng điều này có thể được thực hiện cho một trang web không?

@Golmaal thực sự đã trả lời điều này, tôi chỉ dài dòng hơn một chút.

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

Bạn không có quyền kiểm soát người dùng di chuyển hướng, tuy nhiên, ít nhất bạn có thể nhắn tin cho họ. Ví dụ này sẽ ẩn trình bao bọc nếu ở chế độ dọc và hiển thị thông báo cảnh báo và sau đó ẩn thông báo cảnh báo ở chế độ ngang và hiển thị chân dung.

Tôi không nghĩ câu trả lời này tốt hơn @Golmaal, chỉ có một lời khen cho nó. Nếu bạn thích câu trả lời này, hãy đảm bảo ghi công cho @Golmaal.

Cập nhật

Tôi đã làm việc với Cordova rất nhiều gần đây và hóa ra bạn CÓ THỂ kiểm soát nó khi bạn có quyền truy cập vào các tính năng gốc.

Cập nhật khác

Vì vậy, sau khi phát hành Cordova, nó thực sự khủng khiếp. Tốt hơn là sử dụng một cái gì đó như React Native nếu bạn muốn JavaScript. Nó thực sự tuyệt vời và tôi biết nó không phải là web thuần túy nhưng trải nghiệm web thuần túy trên thiết bị di động đã thất bại.

Trong khi bản thân tôi đang đợi câu trả lời ở đây, tôi tự hỏi liệu nó có thể được thực hiện thông qua CSS hay không:

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

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

Hãy thử cái này Nó có thể thích hợp hơn cho bạn

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

Điều này sẽ tự động quản lý vòng quay đều.

Tôi đã phải thử với chiều rộng của các thùng chứa chính của mình:

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