响应式CSS查询不适用于iOS iPad Air 2

Question

我的理解是，这个查询将专门针对我的iPad Air 2，并应用我添加的样式。但是，没有应用任何内容，它看起来与桌面视图相同。我必须为我的网站应用不同的菜单才能在我的iPhone上正常滚动，(overflow-y:scroll/hidden不起作用，所以我创建了多个显示菜单选项的部分，而不是在div中显示内容)，但我在瞄准ipad时遇到了麻烦，因为它们也不能正常滚动。

 @media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
/***
  my css goes here
 **/
}

Answer 1

iPad Air 2

 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2)

Answer 2

把这个元标记放在查询语句之前:

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

你可以在这里阅读更多关于它的功能:响应式元标签

你可能不想把所有的桌面和移动css都放在同一个页面上，而是链接到不同的工作表。这样可以节省初始加载时间，并且不会浪费时间同时加载它们。这样的:

<link rel='stylesheet' media='only screen and (min-width: 821px)' href='css/big.css' />
<link rel='stylesheet' media='only screen and (max-width: 820px)' href='css/little.css' />