Tôi có một trang web mà có một kiểu điện thoại di động:thoại di động trang web - lực lượng cảnh chỉ/không tự động xoay
<link rel="stylesheet" href="css/mobile.css" media="handheld">
Tôi cũng đang sử dụng jQuery để kiểm tra các thiết bị di động và làm thay đổi chức năng phù hợp.
Nhưng tôi muốn biết liệu có cách nào để ép buộc chỉ hướng ngang và tắt tự động xoay không? Hoặc là một giải pháp CSS hoặc jQuery sẽ là tốt.
Cảm ơn!
Bạn không thể buộc hướng trong trang web, nhưng bạn có thể đề xuất hoặc chặn nội dung ở chế độ chuẩn portarit.
tôi đã thực hiện một adaptation của một existing script
trong file html của bạn thêm một phần tử div
<div id="block_land">Turn your device in landscape mode.</div>
Sau đó điều chỉnh css của bạn để trang trải tất cả các trang của bạn
#block_land{position:absolute; top:0; left:0; text-align:center; background:white; width:100%; height:100%; display:none;}
Sau đó thêm một litle javascript để phát hiện hướng
function testOrientation() {
document.getElementById('block_land').style.display = (screen.width>screen.height) ? 'none' : 'block';
}
Đừng quên kiểm tra định hướng trong onload và onorientationchange, có lẽ trong thẻ cơ thể bạn
<body onorientationchange="testOrientation();" onload="testOrientation();">
Hãy cho tôi biết nếu giải pháp này làm việc cho bạn.
Sử dụng truy vấn phương tiện để kiểm tra hướng, trong biểu định kiểu dọc hiển thị mọi thứ và hiển thị thông báo rằng ứng dụng chỉ hoạt động ở chế độ nằm ngang.
<link rel="stylesheet" type="text/css" href="css/style_l.css" media="screen and (orientation: landscape)">
<link rel="stylesheet" type="text/css" href="css/style_p.css" media="screen and (orientation: portrait)">
tôi nghĩ là tốt nhất aproach
Tôi nghĩ rằng cách tiếp cận tốt nhất là kịch bản để khi người dùng thay đổi, nó thay đổi. Tôi đã sửa đổi điều này để nó xoay trang DIV chính của bạn khi ở chế độ dọc, buộc người dùng phải chuyển đổi. Trừ khi họ muốn nghiêng nghiêng đầu của họ:
<script type="text/javascript">
(function() {
detectPortrait();
$(window).resize(function() {
detectPortrait("#mainView");
});
function detectPortrait(mainDiv) {
if (screen.width < screen.height) {
$(mainDiv).addClass("portrait_mode");
}
else {
$(mainDiv).removeClass("portrait_mode");
}
}
})();
</script>
<style type="text/css">
.portrait_mode {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>
Điều này chắc chắn sẽ phá vỡ bất kỳ hoạt ảnh JS nào và khả năng phản hồi di động của trang.Nó sẽ gây ra nhiều vấn đề hơn cho nhà phát triển và nó không thể được coi là một sửa chữa. –
@ WissamEl-Kik Nó vẫn làm những gì OP muốn. Và thực sự, những gì OP yêu cầu cũng sẽ phá vỡ sự đáp ứng di động, vì vậy bạn không thể đổ lỗi cho câu trả lời này để làm điều đó! Nó không thực sự cần JavaScript mặc dù; kích hoạt tính năng này với truy vấn phương tiện 'hướng: chân dung' cũng sẽ hoạt động. –
Tôi đã thử đoạn code sau đây và nó buộc phải trình duyệt để sử dụng chế độ chân dung:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
Mã này đã được thử nghiệm trên iPhone và trên một thiết bị di động.
xin lỗi, tôi nghĩ mã này chỉ ngăn người dùng phóng to hoặc thu nhỏ. Thử nghiệm trên Safari trong iPhone 4S và Chrome trong Android 4.3, cả chế độ ngang và dọc đều có thể thực hiện được. –
Cách đơn giản để buộc định hướng phong cảnh được thiết lập chiều rộng min-max của bạn trong mã css của bạn, hãy thử sử dụng mã này
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
body {
-webkit-transform: rotate(90deg);
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}}
hy vọng giải quyết vấn đề của bạn.
Vì vậy, tôi đã thử một giải pháp tương tự và vấn đề tôi gặp phải là một số người đã bị khóa định hướng của họ. Vì vậy, nó thực sự gây phiền nhiễu cho họ phải mở khóa. Lý tưởng nhất là trang sẽ chỉ hiển thị trong cảnh quan (giống như nhiều ứng dụng trò chơi). Sẽ xem xét sử dụng xoay vòng CSS để giải quyết nó. – gman