有关max-width属性的CSS媒体查询，可为平板电脑和桌面制作1024px大小

Question

我仍然在试图弄清楚媒体查询的工作原理。我有两个媒体查询，一个定位最大宽度：1024px ，另一个定位于平板电脑的最大设备宽度：1024px 。

我面临的问题是，当我在iPAD上测试时，它会跳过 max-device-width：1024px 并转到最大宽度：1024px 。

我的问题是如何为最大宽度1024px 编写桌面和平板电脑的媒体查询？

我希望有一个用于桌面和一个用于平板电脑的宽度为1024的原因是因为我需要不同的风格。

我的 CSS 代码如下。

$query = "SELECT * FROM users WHERE username = '".$username."' AND password ='".$password."' ";
$result = $db->query($query);

if($result->num_rows>0){
 // User exists
}else{
// User not exists.
}

Answer 1

这套媒体查询适用于“平板电脑和桌面”

移动

only screen and (min-width: 480px) { ... }

<强>平板

only screen and (min-width: 480px) { ... }
only screen and (min-width:321px) and (max-width:768px) { ... }
only screen and (min-width: 768px)  { ... }

<强>桌面

only screen and (min-width: 992px) { ... }

<强>巨大

only screen and (min-width: 1280px) { ... }

Answer 2

检查Media Queries for Standard Devices。它可能是有用的

Answer 3

我建议您在现有查询中使用此媒体查询，以确保其设备具有视网膜分辨率

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1) { /* Retina-specific stuff here */ }