5
Trên iPad sử dụng Safari, hãy vào trang này: http://ifelse.org/projects/errors/viewport/test.htmlThẻ xem META có bị hỏng trong Mobile Safari khi ở chế độ webapp không?
Đây là Nguồn:
<html>
<head>
<title>Viewport Test</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=1030" />
<style>
body {
padding: 0;
margin: 0;
}
#test {
width: 1024px;
height: 500px;
border: 3px solid #ccc;
}
</style>
</head>
<body>
<div id="test">
<p>This is 1024 with a 3px border, so device width is 1030.</p>
<p>Works when viewing in Mobile Safari.</p>
<p>Does not work if you Bookmark it to the Home Screen and open from there.</p>
<p>Compare <a href="viewport_1030_safari.png">MobileSafari</a> view to <a href="viewport_1030_webapp.png">Webapp</a> view.</p>
</div>
</body>
</html>
Nó sẽ giống như hình ảnh này nơi viewport 1030 pixel là hoàn toàn có thể nhìn thấy trong chế độ Portrait:
- Tap Bookmarks Biểu tượng (+)
- Tap Thêm vào Màn hình chính
- Dấu trang được tạo. Mở dấu trang và trang web sẽ mở trong chế độ webapp với chế độ toàn màn hình.
Thẻ cơ bản bị bỏ qua. Tôi đã thử một số biến thể kiện các giá trị pixel của thiết bị và hỗn hợp. Không có gì.
Vì vậy, ... đây có phải là lỗi hoặc tính năng không?
Nếu điều này là cố ý trên một phần của Apple, về cơ bản nó có nghĩa là phát triển đúng cách các ứng dụng web đẹp mắt bạn cần phải đi với chiều rộng thực tế là 768px ...?
Trong vài ngày qua, tôi nhận thấy Chrome đã ném lỗi sau đây khi tải trang: "Đối số khung nhìn" chiều rộng "không được nhận dạng. Nội dung bị bỏ qua". Cài đặt chế độ xem đã được thay đổi gần đây chưa? Tôi quan tâm nếu câu hỏi của OP có liên quan. –