2011-11-29 26 views
7

Tôi có trang web có chiều rộng cố định (rộng 640 pixel). Tôi muốn trang này co lại thành chiều rộng của thiết bị di động. Tuy nhiên, nếu chiều rộng gốc của thiết bị lớn hơn 640 pixel, tôi không muốn nó kéo dài. Có vẻ đơn giản đủ:Android bỏ qua quy mô tối đa khi sử dụng thẻ meta chế độ xem cố định chiều rộng

<meta name="viewport" content="width=640, maximum-scale=1.0" /> 

Điều này hoạt động như mong đợi trong iPad/iPhone. Tuy nhiên, trên máy tính bảng Android (ví dụ ở chế độ ngang), nội dung được thu nhỏ để vừa với màn hình. Nói cách khác, Android chỉ đơn giản là bỏ qua quy mô tối đa = 1. Bạn có thể xem trang ví dụ về sự cố here. Vì lợi ích của sự hoàn chỉnh ở đây là nguồn gốc:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>Test Viewport</title> 
    <meta name="viewport" content="width=640, maximum-scale=1.0" /> 
    <style> 
     div.bar { 
     position: absolute; 
     width: 636px; 
     height: 50px; 
     background-color: yellow; 
     border: 2px solid black; 
     left: 50%; 
     margin-left: -320px; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="bar"> 
    </div> 
    </body> 
</html> 

Tôi đã làm rất nhiều nghiên cứu và thử nghiệm với các viewport meta-tag. Tôi đã đọc tất cả mọi thứ về chủ đề, nhưng chưa thấy vấn đề này dường như cơ bản được đề cập.

Hai lưu ý:

  • Đây không phải là mục tiêu-densitydpi vấn đề

  • Thiết lập chiều rộng khung nhìn vào điện thoại-width là không hữu ích trong trường hợp này vì chiều rộng nội dung được cố định và lớn hơn (ví dụ) chiều rộng thiết bị dọc của điện thoại. Nếu tôi đặt chiều rộng = chiều rộng thiết bị, trang sẽ không tự động được thu nhỏ để vừa với điện thoại ..

Cảm ơn nhiều.

Trả lời

10

Sau hơn đập đầu tôi chống lại một bảng, tôi đã tìm thấy một giải pháp:

Đáng tiếc là có vẻ như iOS và Android chỉ đơn giản là hành xử khác nhau (Android là rất rõ ràng là không làm những gì spec nói bằng cách bỏ qua tối đa quy mô) . Giải pháp là để chuyên dựa trên độ phân giải sử dụng JavaScript:

  • Nếu độ rộng màn hình (xem ghi chú bên dưới) lớn hơn hoặc bằng chiều rộng trang cố định (640 trong ví dụ của tôi), sau đó đặt các meta viewport chiều rộng nội dung của thẻ để độ rộng màn hình

  • khác thiết lập chiều rộng nội dung các khung nhìn meta-tag của chiều rộng trang cố định (640)

Presto. Lame rằng nó đòi hỏi chuyên môn JavaScript, nhưng đó là cuộc sống.

Lưu ý rằng màn hình Javascript .width trên iPad/iPhone là không chính xác nếu thiết bị ở chế độ ngang (iPad vẫn báo cáo chiều rộng dọc thay vì chiều rộng ngang, không giống như Android được nhận ngay trong trường hợp này!) . Do đó, bạn cần kiểm tra window.orientation trên iPad/iPhone và sử dụng màn hình .height thay vì màn hình.width nếu bạn ở chế độ ngang.

+0

Điều này có vẻ tuyệt vời vì tôi cũng gặp phải sự cố tương tự với Android. Nếu tôi cố gắng thực hiện điều này là có một nơi tôi có thể đi để có được kịch bản cơ bản? Vì tôi không lập trình và không am hiểu về Javascript .. – kia4567

+0

@logidelic vui lòng đăng tập lệnh bạn đã sử dụng để những người khác cũng có thể khắc phục sự cố tương tự, vui lòng – user2190488

0

Tôi muốn sử dụng

width=640, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi 

Thay vì chỉ là tài sản quy mô Max ... Thuộc tính target-densityDpi si Android cụ thể, có thể nó có thể khắc phục được sự cố của bạn.

+1

Tôi không chắc chắn ý của bạn là "Tôi muốn sử dụng", nhưng điều này không giải quyết được vấn đề. – logidelic

+0

Không hoạt động trên Android. Bạn chỉ có thể không phù hợp với nội dung trên Android như bạn có thể trên iPhone ... OP là đúng. – Miro

+0

các tính năng vô hiệu hóa ở trên có thể phóng to trên Android của tôi – user2190488

Các vấn đề liên quan