仅在移动肖像上定位 Firefox 的 CSS 规则答案

【问题标题】：Target CSS rules for Firefox on mobile portrait only仅在移动肖像上定位 Firefox 的 CSS 规则
【发布时间】：2021-12-13 17:12:00
【问题描述】：

我想针对一些特定的 CSS 规则 仅限纵向模式的移动设备上的 Firefox

我试过了，但它不起作用：

/* for firefox on mobile portrait only */

@-moz-document url-prefix() {
  @media only screen and (max-width: 480px) {
    .gallery_legend {
      padding-bottom: 26px;
    }
    .slide-nav {
      bottom: 11px;
    }
  }
}

【问题讨论】：

标签： css firefox mobile media

【解决方案1】：

试试这样 ;-) 你应该首先使用media query，then @-moz-document url-prefix() 并指定选择器。这里有简单的例子 => codepen

@media only screen and (max-width: 480px) {
  @-moz-document url-prefix() {
    h1 {
      color: red;
    }
  }
}

所以在你的情况下应该是：

@media only screen and (max-width: 480px) {
  @-moz-document url-prefix() {
    .gallery_legend {
      padding-bottom: 26px;
    }
    .slide-nav {
      bottom: 11px;
    }
  }
}

对于 IOS 和 firefox 试试这个 =>

@supports (-webkit-touch-callout: none) {
  @media screen and (max-width: 480px) {
    h1 {
      color: red;
    }
  }
}

【讨论】：

我已经在 IOS 上使用最后一个 firefox (v38) 进行了尝试。不幸的是，这不起作用
@sprea Ubuntu 20.04 我现在在 Firefox 中检查它可以工作，chrome 不能。你有上面代码笔的例子，建议重新加载浏览器（硬刷新），也许添加一些背景或颜色样式来检查它;-)
当然，我尝试使用 h1 {color: red;} 但没有任何变化.. 在 iPhone 11 pro 纵向模式下，codepen 也无法正常工作。（h1 文本保持黑色）我试图增加（最大宽度：800px）但这并没有改变任何东西。
@spera 这里有源代码，我用过，它可以工作 ios iphone se firefox :-D ！上面的例子;-) => stackoverflow.com/questions/30102792/…
@sprea 就我而言，仅此而已，我必须承认您的错误使我筋疲力尽...要取悦所有人，这可能很困难...：-D我给您的来源解释了读了很多，我希望你能找到它：D 最好的问候我的朋友！