html - 如何为 iPad 和 iPad Pro 设置相同的布局？

Question

我有以下问题:到目前为止，我已经在平板电脑纵向格式的响应式网站上输入了以下媒体查询:

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

这使您可以控制自己的 iPad 纵向格式设计。到目前为止，一切都很好。如果您现在查看 iPad Pro(例如新的 10.5")，iPad Pro 并没有采用上述设计，而是带有针对桌面版的媒体查询。

我必须如何编写条件才能使所有 iPad，无论纵向格式的分辨率如何，始终显示相同的设计？我只需要有关如何为 10.5 扩展它的提示。

我尝试使用以下代码失败:

@media only screen and (min-device-width: 1400px) and (max-device-width: 1800px) and (min-device-pixel-ratio: 2.5) {
...
}

但这不起作用 - 无论我使用哪种最小设备和最大设备。

我做错了什么？

附录:ipad pro 的分辨率为 1668 x 2224 px

Answer 1

在 iPad pro 上试试这个

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
}

/* Portrait */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}