CSS 目标 iPad Pro 12.9 纵向模式不工作

Question

我们有以下 CSS 适用于除 iPad Pro 12.9 之外的所有 iPad：

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */
/* Portrait and Landscape */
  
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
    .pp-button-1 {margin-bottom: 10px;)
}
    
/* ----------- iPad Pro 10.5" ----------- */
/* Portrait */

@media only screen
  and (min-device-width: 834px)
  and (max-device-width: 834px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2) {
    .pp-button-1 {margin-bottom: 0;)
}
    
/* ----------- iPad Pro 11 2018 " ----------- */
/* Portrait */
    
@media only screen
and (min-width: 834px)
and (orientation: portrait) {
    .pp-button-1 {margin-bottom: 0;}
}

/* ----------- iPad Pro 11 2020 " ----------- */

@media only screen
and (min-width: 834px)
and (orientation: portrait) {
    .pp-button-1 {margin-bottom: 0;}
}

/* ----------- iPad Pro 11 2021 " ----------- */
    
@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),
    only screen and (min-device-pixel-ratio: 2) {
    .pp-button-1 {margin-bottom: 0;}
}

/* ----------- iPad Pro 9 " ----------- */
/* Portrait */
    
@media only screen
and (min-width: 1024px)
and (orientation: portrait) {
    .pp-button-1 {margin-bottom: 10px;}
}

/* ----------- iPad Pro 12.9" ----------- */
/* Portrait */
  
@media only screen
and (min-device-width: 1024px)
and (max-device-height: 1366px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
    .pp-button-1 {margin-bottom: 0;}
}

我们的网站 https://mandoemedia.com 在 iPad Pro 12.9 上的其中一个按钮上方显示有间隙：

由CSS产生：

.pp-button-1 {
    margin-bottom: 10px;
}

注意最后一个 CSS 规则，它针对 iPad Pro 12.9 取自 this page:

/* ----------- iPad Pro 12.9" ----------- */
/* Portrait */
  
@media only screen
and (min-device-width: 1024px)
and (max-device-height: 1366px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
    .pp-button-1 {margin-bottom: 0;}
}

然而这个margin-bottom: 0;没有生效。

编辑：是生效的是：

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
    .pp-button-1 {margin-bottom: 10px;)
}

为什么 iPad 3, 4 and Pro 9.7" 媒体查询对 iPad Pro 12.9 有效？

Answer 1

我认为以下应该可行，附上屏幕截图。

.padding-20-20.mobile-centered {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}

CSS 目标 iPad Pro 12.9 纵向模式不工作

CSS targeting iPad Pro 12.9 in Portrait not working

css

ipad