如何使用 CSS 媒体查询专门针对 iPad？

使用 CSS 媒体查询专门针对 iPad

在多设备环境中，隔离特定设备可能具有挑战性，尤其是当它们共享时相似的尺寸。其中一个案例是将 iPad 与 LG Pad 和 Galaxy Tab 等其他平板电脑区分开来，所有这些平板电脑的设备宽度均为 768px。

为了解决这个问题，CSS 媒体查询提供了一种解决方案。然而，由于宽度重叠，像 min-device-width 和 max-device-width 这样的传统方法是无效的。

解决方案：

最后，一种利用设备的方法height 解决了这个问题：

<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />

此解决方案针对宽度为 768 像素、高度为 1024 像素、纵向或横向的设备，有效隔离 iPad。

最大限度地减少 HTTP 调用，媒体查询可以嵌入到主 CSS 文件中：

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .ipad-portrait { color: red; } /* your css rules for ipad portrait */
}
@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
  .ipad-landscape { color: blue; } /* your css rules for ipad landscape */
}

此外，请参阅以下资源以获取更多见解：

• https://developer.apple。 com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html

以上是如何使用 CSS 媒体查询专门针对 iPad？的详细内容。更多信息请关注PHP中文网其他相关文章！