Tôi cần chiều rộng khung nhìn cho một trang có kích thước là 950px và phông nền là 630px. Độ rộng pixel này không may là không linh hoạt.Làm thế nào để vừa với màn hình sau khi thay đổi chiều rộng khung nhìn trên sự thay đổi hướng?
Tôi đang điều chỉnh độ rộng của nội dung DOM dựa trên hướng sử dụng truy vấn phương tiện CSS.
Tôi đang nghe các sự kiện thay đổi hướng trong JS để thay đổi kích thước chế độ xem trên thay đổi hướng.
Mọi thứ đều tốt khi tải trang ban đầu (dọc hoặc ngang).
Tuy nhiên, sau khi thay đổi định hướng, Mobile Safari giữ nguyên cài đặt tỷ lệ trước đó, thay vì gắn khung nhìn vào màn hình. Nhấn đúp hoặc nhấn hai lần. Nhưng tôi cần điều đó là tự động.
Tôi đã đính kèm nguồn bên dưới và tải nó lên bản demo URL.
Dưới đây là các ảnh chụp màn hình được chụp sau khi thay đổi hướng: từ ngang sang dọc và từ dọc sang ngang.
Làm cách nào để buộc Safari tự động đặt chiều rộng khung nhìn thành chiều rộng màn hình? Hoặc tôi đang đi về điều này tất cả các sai?
Thay đổi các cài đặt quy mô khác nhau trong chế độ xem không có tác dụng. Đặt maximum-scale=1.0 hoặc initial-scale=1.0 xuất hiện để ghi đè số width của tôi, đặt width thành device-width (tức là 1024 hoặc 768 trên iPad 2 của tôi), để lại khoảng trống lề. Thiết lập minimum-scale=1.0 dường như không làm gì cả.
<!DOCTYPE html>
<html>
<head>
<title>iPad orientation</title>
<meta name="viewport" content="user-scalable=yes">
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">;
/**
* update viewport width on orientation change
*/
function adapt_to_orientation() {
// determine new screen_width
var screen_width;
if (window.orientation == 0 || window.orientation == 180) {
// portrait
screen_width = 630;
} else if (window.orientation == 90 || window.orientation == -90) {
// landscape
screen_width = 950;
}
// resize meta viewport
$('meta[name=viewport]').attr('content', 'width='+screen_width);
}
$(document).ready(function() {
// bind to handler
$('body').bind('orientationchange', adapt_to_orientation);
// call now
adapt_to_orientation();
});
</script>
<style type="text/css" media="screen">
body {
margin: 0;
}
#block {
background-color: #333;
color: #fff;
font-size: 128px;
/* landscape */
width: 950px;
}
#block .right {
float: right
}
@media only screen and (orientation:portrait) {
#block {
width: 630px;
}
}
</style>
</head>
<body>
<div id="block">
<div class="right">→</div>
<div class="left">←</div>
</div>
</body>
</html>
Tôi cũng có thể xác nhận ở trên có kết quả tuyệt vời trên iPad (tháng 5 năm 2013) – Richard
Rõ ràng là vít lên chiều rộng trên nhiều thiết bị khác. Vì vậy, không thực sự là một giải pháp tốt. Nhưng cuối cùng cũng có điều gì đó để làm việc với :-) –
+1 cho khái niệm. Tốt đẹp. –