nhắm mục tiêu iphone4 với thiết kế đáp ứng (truy vấn phương tiện css) như thể thấp hơn res

Question

Điều này phải được trả lời trước, nhưng tôi không thể tìm thấy câu hỏi có liên quan.

Tôi đã thiết kế một trang web đáp ứng, với các truy vấn phương tiện truyền thông css sẽ đi xuống để hiển thị chính xác trên 320 chiều rộng.

Tôi muốn là iPhone4 (640 x 960) khi ở chế độ dọc (rộng 640) để tuân thủ truy vấn phương tiện như thể nó hiển thị chiều rộng = 320 pixel thay thế. Lý do: mặc dù iphone có nhiều pixel hơn, tôi muốn hiển thị bố cục được đơn giản hóa cho những người dùng đó, tương tự như người dùng điện thoại không mật độ cao.

Bất kỳ cách nào để thực hiện việc này, bằng cách chỉ định một số thẻ meta cho các điện thoại mật độ pixel cao này chẳng hạn?

Tất nhiên, tôi có thể xác định truy vấn phương tiện riêng biệt cho iphone 4 và tương tự với min-device-pixel-ratio: 2 nhưng điều này dẫn đến các truy vấn phương tiện truyền thông css riêng biệt (một cho thấp và một cho mật độ điểm ảnh cao) về cơ bản có cùng logic dường như rất khó với tôi (http://en.wikipedia.org/wiki/Don%27t_repeat_yourself)

Điều lạ là: Ipad 3 mới, với mật độ điểm ảnh 2, thực hiện đúng cách tôi muốn, tức là: nó bắt chước (ít nhất là truy vấn phương tiện css) một thiết bị với một nửa độ phân giải.

Answer 1

iPhone 4 (và 4S) sẽ đáp ứng với thẻ meta này:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

Đó là "ban đầu quy mô" một phần mà bạn đang theo đuổi. Nó sẽ làm cho thiết bị có độ phân giải cao hoạt động như chiều rộng 320px (hoặc 480 độ ngang).

Có other bugs around landscape orientation mà bạn nên biết.

Ngoài ra, hãy nhớ rằng có một orientation parameter available truyền thông truy vấn:

@media screen and (orientation:landscape) { 
/* Landscape styles */ 
} 

Answer 2

Đầu tiên: Tôi nghĩ rằng có một lỗi đánh máy trong câu hỏi của bạn - trên một màn hình 640x960, 640 rộng là chế độ portait, không cảnh quan . Chân dung dọc, ngang là ngang.

Điều đó nói rằng, nếu tôi đọc câu hỏi của bạn đúng, bạn đang hỏi cách nhắm mục tiêu một màn hình hiển thị võng mạc bằng cách sử dụng truy vấn phương tiện cho chiều rộng.

Câu trả lời là bạn không thể - cả màn hình hiển thị võng mạc và màn hình hiển thị không phải võng mạc sẽ tự hiển thị với trình duyệt dưới dạng 320x240. Sự khác biệt, như bạn đã nói, đó là màn hình hiển thị võng mạc có mật độ điểm ảnh 2x, mà bạn có thể nhắm mục tiêu với các truy vấn phương tiện truyền thông:

.avatar { 
    display: block; 
    width: 50px; 
    height: 50px; 
    background: url("50x50-avatar.png"); 
} 
@media only screen and (-moz-min-device-pixel-ratio: 2), 
     only screen and (-o-min-device-pixel-ratio: 2/1), 
     only screen and (-webkit-min-device-pixel-ratio: 2), 
     only screen and (min-device-pixel-ratio: 2) { 
    .avatar { 
    background: url("100x100-avatar.png"); 
    background-size: 50px 50px; 
    } 
} 

Ví dụ này là để hiển thị hình ảnh độ phân giải cao trên màn hình võng mạc, nhưng bạn có thể sử dụng các kỹ thuật tương tự để tinh chỉnh bố cục cho màn hình võng mạc. Vì vậy, trong một nutshell, viết phong cách của bạn cho màn hình không võng mạc đầu tiên, và sau đó thêm ghi đè hiển thị võng mạc bằng cách sử dụng các truy vấn phương tiện truyền thông, mà nên tránh các mối quan tâm của bạn. GIẢI PHÁP.

Đọc thêm:

• Retina iPad Specific CSS
• Safari Developer Library: Configuring the Viewport