Chế độ xem bỏ qua chiều rộng tùy chỉnh

Tôi đang phát xung quanh với chế độ xem và cố gắng thực hiện chiều rộng 520, nhưng có vẻ như làm chiều rộng thiết bị thay thế. Ý tưởng nào?Chế độ xem bỏ qua chiều rộng tùy chỉnh

<html> 
<head> 
<meta name="viewport" content="width=520, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<style type="text/css"> 
h1 
{ 
    width: 980px; 
    border: 1px solid red; 
} 

h2 
{ 
    width: 520px; 
    border: 1px solid green; 
} 

h3 
{ 
    width: 320px; 
    border: 1px solid green; 
} 

</style> 
</head> 

<body> 
<h1>I am a big heading 980px wide. Yes I am</h1> 
<h2>I am a big heading 520px wide. Yes I am</h2> 
<h3>I am a big heading 320 wide. Yes I am</h3> 
</body>

Nguồn

2013-07-12 Chris Muench

Bạn đã đọc [bài viết tuyệt vời này] (http://www.quirksmode.org/mobile/viewports2.html) giải thích pixel có ý nghĩa gì đối với các chế độ xem di động? –

Có lý do đặc biệt nào để bạn không đặt 'DOCTYPE' không? –

Đối với các trang đặt thang điểm ban đầu hoặc tối đa, điều này có nghĩa là thuộc tính chiều rộng thực sự chuyển thành chiều rộng Chế độ xem tối thiểu. Ví dụ: nếu bố cục của bạn cần ít nhất 500 pixel chiều rộng thì bạn có thể sử dụng đánh dấu sau. Khi màn hình rộng hơn 500 pixel, trình duyệt sẽ mở rộng Viewport (chứ không phải zoom in) để phù hợp với màn hình:

<meta name="viewport" content="width=500, initial-scale=1">

này được bắt nguồn từ LINK này.

Vì vậy, tôi giả định rằng trong trường hợp của bạn quá vì bạn đã đặt chiều rộng thẻ html thành hơn 520px, trình duyệt đang lấy chiều rộng 520px dưới dạng chiều rộng tối thiểu và làm việc trở lên từ đó để hiển thị các thẻ lớn hơn.

Nguồn

2013-07-22 11:30:43 AnaMaria

This article dường như cho thấy content="initial-scale=1, maximum-scale=1, user-scalable=no" là vấn đề, và rằng nếu bạn đang cố gắng để tạo ra một khung nhìn cố định họ nên được bỏ qua.

Tôi chưa có cơ hội thử nghiệm bản thân, nhưng lý do cơ bản dường như là âm thanh.

Hy vọng điều đó sẽ hữu ích.

Nguồn

2013-07-19 13:50:22

Thật khó để dựa vào thẻ meta chế độ xem cho chiều rộng. Dưới dạng this article chỉ ra:

Đôi khi chính thức screen.width không có ý nghĩa nhiều vì số điểm ảnh quá cao. Ví dụ: Nexus One có chiều rộng chính thức là 480px, nhưng các kỹ sư của Google đã quyết định rằng cho chế độ xem bố cục có chiều rộng 480px khi sử dụng chiều rộng thiết bị là quá nhiều. Họ thu nhỏ nó xuống 2/3rds, do đó, chiều rộng thiết bị cho bạn có chiều rộng 320px, giống như trên iPhone.

320px là "Pixel CSS", có nghĩa là 320 pixel là chiều rộng của chế độ xem, bất kể thiết bị hoặc tài liệu thực tế rộng đến mức nào.

Nếu bạn chỉ định chiều rộng lớn hơn (hoặc nhỏ hơn) so với kích thước thực tế của điện thoại và giới hạn quy mô, bạn sẽ gặp sự cố. Thử xóa initial-scale=1, maximum-scale=1, để cho phép trình duyệt mở rộng quy mô trang cho vừa với thiết bị. Bạn vẫn có thể giữ user-scalable=no và width=520.

Nguồn

2013-07-19 14:00:19 Mooseman

-1

Độ rộng của thẻ tiêu đề (H1, H2, H3) là 980px, 520px và 320px. Thẻ tiêu đề của bạn có chiều rộng được mã hóa cứng do đó chiều rộng của thiết bị sẽ bao nhiêu nhưng chiều rộng thẻ tiêu đề của bạn sẽ giống nhau và sẽ không trở thành đáp ứng. Tôi nghĩ thay vì cung cấp chiều rộng bằng pixel tại sao bạn không sử dụng chiều rộng bằng%. Và bạn cũng có thể đặt thẻ tiêu đề trong một vùng chứa làm cho vùng chứa đó position:relative thậm chí bạn có thể thực hiện tương đối với thẻ tiêu đề cá nhân của bạn.

Nguồn

2013-07-22 10:58:49

Chế độ xem bỏ qua chiều rộng tùy chỉnh

Trả lời

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