buộc trang web chỉ hiển thị ở chế độ nằm ngang

Question

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

Answer 1

Trong khi bản thân tôi sẽ được chờ đợi ở đây cho một câu trả lời, tôi tự hỏi nếu nó có thể được thực hiện thông qua CSS:

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

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

Answer 2

@Golmaal thực sự trả lời này, tôi chỉ bị tiết 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 thể kiểm soát người dùng di chuyển hướng nhưng bạn ít nhất 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 điệp cảnh báo và sau đó ẩn thông báo cảnh báo ở chế độ nằm ngang và hiển thị chân dung.

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

Cập nhật

Tôi đã làm việc với Cordova rất nhiều thời gian gần đây và nó quay 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 bản địa.

Một Cập nhật

Vì vậy, sau khi phát hành Cordova nó thực sự là khủng khiếp cuối cùng. Tốt hơn nên 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à trang web thuần túy nhưng nó không thành công.

Answer 3

Hãy thử điều 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>

này sẽ tự động quản lý thậm chí quay.

Answer 4

tôi phải chơi với độ rộng của container chính của tôi:

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