Có cách nào để buộc bố cục ngang/ngang trên thiết bị di động không?

Question

Tôi đang tạo phiên bản trang web trên điện thoại di động và trong trường hợp cụ thể này, nó sẽ trông hoàn hảo trong bố cục ngang. Có cách nào để buộc bố cục này bất kể cài đặt người dùng là gì không?

Trả lời với một số cách phổ quát được đánh giá cao, nhưng cũng nếu bạn biết cách thực hiện điều này trên bất kỳ nền tảng cụ thể nào (iPhone, android ..), có lẽ chúng tôi có thể thu thập một bộ quy tắc phù hợp để nhắm mục tiêu phần lớn người dùng di động.

Answer 1

Có một hack sẽ thực hiện điều này, nhưng tôi nghiêm túc khuyên bạn không nên sử dụng nó - thiết kế của bạn phải thích nghi với việc ai đó đang ở chế độ dọc hay ngang.

Bước 1: Truy vấn window.orientation tài sản để xem nếu bạn đang ở trong khung cảnh hoặc chân dung chế độ

Bước 2: Nếu bạn đang ở chế độ chân dung sử dụng một -webkit-transform xoay (-90) trên một div bao gồm toàn bộ trang của bạn để buộc trang đó vào bố cục ngang.

Thao tác này sẽ không hoạt động chính xác - giao diện người dùng trình duyệt vẫn ở chế độ dọc, nhưng có lẽ người dùng sẽ biết rằng họ phải xoay điện thoại trở lại chế độ ngang để xem nội dung. Điều này là cực kỳ gây phiền nhiễu cho người dùng - có lẽ là một lý do chính đáng mà họ đang cố đọc trang web của bạn ở chế độ dọc.

Answer 2

Hãy thử thêm Meta này để < đầu >

<meta name="viewport" content="width=480"> 

Sự hiện diện của một thanh cuộn ngang trong chế độ thẳng đứng sẽ gợi cho người dùng biết anh/cô ấy cần phải xoay vào cảnh quan. Tôi không thể nhìn thấy nhiều trường hợp sử dụng cho điều này - nhưng tôi đã thấy điều này cho một số trò chơi và ứng dụng bản đồ để nó không hoàn toàn xấu xa.