Câu hỏi buộc trang web chỉ hiển thị ở chế độ nằm ngang


Tôi chỉ muốn hiển thị trang web của mình ở chế độ 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?


76
2018-01-05 05:25


gốc


Câu hỏi hay, nhưng tôi đặt cược câu trả lời là "Không thể" mặc dù bạn có thể lừa dối: stackoverflow.com/a/4807047/615754. - nnnnnn
Không hẳn. Bạn có thể loại giả mạo nó bằng cách sử dụng biến đổi css nhưng nó xấu xí, và tôi không nghĩ rằng có một cách để biết nếu nó lộn ngược trên Android. Khá chắc chắn điều này đã được thảo luận ở đây trước đây. - Dagg Nabbit
có thể buộc trang web có chiều rộng tối thiểu: 320px không? vì vậy nếu kích thước màn hình của người dùng có độ phân giải thấp hơn sẽ cần phải cuộn để xem toàn bộ trang web. Hoặc tôi có thể phóng to 240px chiều rộng tới nội dung 320px không? - coure2011


Các câu trả lời:


@Golmaal thực sự đã trả lời câu hỏi này, tôi chỉ là một chút chi tiết hơn.

<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 đối với người dùng di chuyển định hướng tuy nhiên bạn có thể ít nhất là 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ĩ rằng câu trả lời này là tốt hơn so với @ Golmaal, chỉ là 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 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 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.

Cập nhật khác

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 đó không phải là trang web thuần túy nhưng trải nghiệm web thuần túy trên loại thiết bị di động không thành công.


104
2018-01-05 05:45



1 Không chỉ cho câu trả lời ... cũng cho tính chân thực của bạn ...... - BobDroid
1 cho ý nghĩ ... - Chetan
làm cho ngày của tôi! đây thực sự là kịch bản tiện dụng để buộc chế độ phong cảnh trên các thiết bị nhỏ đặt một thông điệp đẹp. - dhruvpatel
bạn nhận được hầu hết tín dụng mặc dù;) + 1d cho câu trả lời được mô tả tốt của bạn và @Golmaal .. - Hitesh Misro
rõ ràng hơn và chức năng hơn - Erçin Dedeoğlu


Trong khi bản thân tôi sẽ chờ đợi ở đây để có 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}
}

43
2018-01-05 05:32



Tôi đang tìm kiếm một cái gì đó như thế này, nó đã làm việc cho bạn ?? - Monica


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>

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


29
2018-03-13 17:25



+1 Đó là khá mát mẻ bằng cách sử dụng biến đổi để xoay. Tài giỏi. - Jason Sebring
Thông minh, nhưng không thực sự hiệu quả. Phần lớn trang không thể truy cập được khi nó được xoay, bởi vì chỉ nội dung được xoay và không phải là trình duyệt thực tế. - Graham
Điều này sẽ phá vỡ bất kỳ hoạt hình nào và có thể nó sẽ phá hủy khả năng phản hồi di động của trang. - Wissam El-Kik


Tôi phải chơi với độ 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%);
    }
  }
}

1