iPhone 4+ mặc định ở độ phân giải 320px cho ứng dụng web, tôi muốn sử dụng toàn bộ 640px.iPhone 4+ mặc định ở độ phân giải 320px cho ứng dụng web, tôi muốn sử dụng đầy đủ 640px
Tôi có thể thay đổi hành vi iPhone 4+ này để báo cáo giải pháp thực tế không?
EDIT: Vì vậy, tôi có thể sử dụng,
<meta name="viewport" content="width=640" />
nhưng làm thế nào tôi thể chắc chắn đó là một chiếc iPhone 4+ trước khi thiết lập thẻ này?
Câu trả lời ngắn gọn là: bạn có thể kiểm tra tác nhân người dùng và đặt thẻ meta bằng JavaScript.
Câu trả lời dài là: đừng làm vậy. Ban đầu tôi cũng khá bối rối về điều này, khi tôi bắt đầu phát triển cho điện thoại di động. IPhone 4 (và các thiết bị có độ phân giải cao khác) thực sự hiển thị cùng chiều rộng trang với người tiền nhiệm của chúng. Điều này có lẽ là do thực tế rằng các trang web ở khắp mọi nơi sẽ trông hoàn toàn nhỏ và có thể sai lầm nếu họ đã làm khác. Có một sự khác biệt, mặc dù. Điện thoại có độ phân giải cao chỉ hiển thị mọi thứ ở độ phân giải cao hơn (nhưng cùng kích thước).
Điều này không quan trọng đối với những thứ như màu văn bản và màu nền nhưng bạn sẽ thấy rằng hình ảnh không trông sắc nét trên iPhone - đó là vì chúng đang được thay đổi kích thước. Những gì tôi làm là tăng gấp đôi độ phân giải trên hình ảnh, cung cấp cho chúng độ cố định và chiều cao cho kích thước "không phải là cao" của chúng và sử dụng -webkit-background-size: 100% 100%;. Bằng cách này, các thiết bị cũ hơn hiển thị nó như bình thường và các thiết bị có độ phân giải cao trông sắc nét và đẹp mắt. Thông báo trước là điều này làm cho kích thước tệp hình ảnh của bạn lớn hơn.
Để biết thêm thông tin về lý do tại sao một điểm ảnh không phải là luôn luôn là một điểm ảnh nhìn thấy liên kết này: http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
Ngoài ra nếu bạn muốn nhắm mục tiêu các thiết bị độ phân giải cao đặc biệt với CSS. Bạn có thể sử dụng truy vấn phương tiện:
@media screen and (-webkit-device-pixel-ratio: 2) {
body{
background-color: red;
}
}