5
Tôi có các truy vấn phương tiện sau được thiết lập để nhắm mục tiêu đến các thiết bị iOS khác nhau (iPad3, iPad2, iPhone4, iPhone3). Khi tôi tải trang này bằng iPhone3 và iPad2, các div chính xác được tô màu. Khi tôi tải trang này bằng iPad3, iPad2 và kiểu iPhone4 được tải, nhưng KHÔNG phải là iPad3. (Không thể kiểm tra iPhone4 vào lúc này.) Bất kỳ ý tưởng nào?Vấn đề truy vấn phương tiện CSS với thiết bị iOS
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="ipad3.css" media="only screen and (min-device-width:1536px) and (max-device-width:2048px) and (-webkit-min-device-pixel-ratio:2)" type="text/css" />
<link rel="stylesheet" href="ipad2.css" media="only screen and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:0)" type="text/css" />
<link rel="stylesheet" href="iphone4.css" media="only screen and (min-device-width:640px) and (max-device-width:960px) and (-webkit-min-device-pixel-ratio:2)" type="text/css" />
<link rel="stylesheet" href="iphone3.css" media="only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:0)" type="text/css" />
</head>
<body>
<div id="ipad3" style="width:200px;height:200px;border:1px solid black"></div>
<div id="ipad2" style="width:200px;height:200px;border:1px solid black"></div>
<div id="iphone4" style="width:200px;height:200px;border:1px solid black"></div>
<div id="iphone3" style="width:200px;height:200px;border:1px solid black"></div>
ipad3 should be RED
<br>
ipad2 should be GREEN
<br>
iphone4 should be BLUE
<br>
iphone3 should be ORANGE
</body>
</html>
..và 4 file css được mã hoá phù hợp (ví dụ này là file iPad3.css):
#ipad3 { background-color: red; }
Tại sao bạn chỉ xóa câu hỏi này để hỏi lại? – BoltClock
Tôi đã làm rõ vấn đề một cách đáng kể và cung cấp một ví dụ dễ dàng để mọi người tự thử - tốt hơn là chỉ chỉnh sửa bản gốc. –