【问题标题】: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 querythen @-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 最好的问候我的朋友!
    猜你喜欢
    • 1970-01-01
    • 2015-09-18
    • 1970-01-01
    • 2016-05-14
    • 2020-03-08
    • 1970-01-01
    • 1970-01-01
    • 2015-05-21
    • 1970-01-01
    相关资源
    最近更新 更多