媒体查询ipad和ipad pro

时间:2017-12-22 12:32:53

标签: css media-queries

我想知道我如何设计ipad和 ipad pro。

我的界面在ipad pro上响应而不在ipad上(我使用chrome控制台检查)。

但是当我使用这个查询时

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3)

它影响已经响应的 ipad pro

如何仅通过将查询应用于 ipad

来解决此问题

2 个答案:

答案 0 :(得分:0)

您可以尝试在媒体查询中提及min-widthmax-width,以便在ipad设备上受到影响。

@media screen and (max-width: 768px) and (min-width: 360px) {}

答案 1 :(得分:0)

TL; DR

您无法将媒体查询集中到任何特定的设备类型;因为定义这些设备的内容可以被其他设备使用,或者可以在设备更新中更改,或者只是缺少(空)值。

  

如何通过仅将查询应用于iPad(而非专业版)

来解决此问题

因此这个问题无法回答。

解释

这里的各种问题都是同一个问题,答案都是"屏幕分辨率"根据;这样您就可以检测屏幕的分辨率,并相应地设置样式。 (例如other answers到这个问题)

但;具有特定屏幕尺寸的其他设备或桌面浏览器将能够轻松实现这些屏幕尺寸并且能够实现这些屏幕尺寸。将CSS显示为另一个媒体的输出。

此外,可以使用USER_AGENT字符串检测设备,但这根本不可信,并且经常伪造,例如Safari版本或Firefox Mobile视图或其他各种简单易用的工具。

如果设备是某个品牌或型号,可以告诉网站的所有可用数据都是 非常不正常 。随着规格的增加,这种可靠性的缺乏会增加;如果你想要一个特定类型的IPad设备,你可以使用Javascript开发一些东西,但这将是考虑不明确

记住:

  

永远不会确定哪种类型的设备正在查看您的远程内容。

好的,所以你不想空手而归

我理解,你不能拒绝答案....所以这里有一些有用的链接,它们会为你提供一些范围来检查广泛的水平您要搜索的属性。

请注意,这些都遭受上述迷惑和不一致:

在提出这个问题之前,您应该已经阅读过这些内容。