Tất cả những câu trả lời được liệt kê ở trên, sử dụng max-device-widthhoặc max-device-heightcho các truy vấn phương tiện, đều gặp phải lỗi rất lớn: chúng cũng nhắm mục tiêu rất nhiều thiết bị di động phổ biến khác (có thể không mong muốn và chưa bao giờ được thử nghiệm, hoặc sẽ tung ra thị trường trong tương lai).
Truy vấn này sẽ hoạt động cho bất kỳ thiết bị nào có màn hình nhỏ hơn và có thể thiết kế của bạn sẽ bị hỏng.
Kết hợp với các truy vấn phương tiện dành riêng cho thiết bị tương tự (đối với HTC, Samsung, IPod, Nexus ...), cách thực hành này sẽ khởi động một quả bom hẹn giờ. Để gỡ lỗi, ý tưởng này có thể làm cho CSS của bạn trở thành một spagetti không được kiểm soát. Bạn không bao giờ có thể kiểm tra tất cả các thiết bị có thể.
Xin lưu ý rằng truy vấn phương tiện duy nhất luôn nhắm mục tiêu IPhone5 và không có gì khác , là:
/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px)
and (device-width : 320px)
and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
/*IPhone 5 only CSS here*/
}
Lưu ý rằng chiều rộng và chiều cao chính xác , không phải chiều rộng tối đa được kiểm tra ở đây.
Bây giờ, giải pháp là gì? Nếu bạn muốn viết một trang web sẽ đẹp trên tất cả các thiết bị có thể, cách tốt nhất là bạn sử dụng xuống cấp
/ * mẫu xuống cấp chúng tôi chỉ kiểm tra độ rộng màn hình, điều này sẽ thay đổi khi chuyển từ dọc sang ngang * /
/*css for desktops here*/
@media (max-device-width: 1024px) {
/*IPad portrait AND netbooks, AND anything with smaller screen*/
/*make the design flexible if possible */
/*Structure your code thinking about all devices that go below*/
}
@media (max-device-width: 640px) {
/*Iphone portrait and smaller*/
}
@media (max-device-width: 540px) {
/*Smaller and smaller...*/
}
@media (max-device-width: 320px) {
/*IPhone portrait and smaller. You can probably stop on 320px*/
}
Nếu hơn 30% khách truy cập trang web của bạn đến từ thiết bị di động, hãy lật ngược chương trình này, cung cấp phương pháp tiếp cận di động đầu tiên. Sử dụng min-device-widthtrong trường hợp đó. Điều này sẽ tăng tốc độ kết xuất trang web cho trình duyệt di động.