Firefoxモバイル固有のCSS

私はAndroidブラウザで自分のウェブサイトのモバイル版をテストしています。Firefoxモバイル固有のCSS

@media only screen and (max-device-width: 480px) { [my mobile CSS] }

は今、私はFirefoxのモバイルベータ版でそれをテストするために始めた、と私は株式ブラウザの両方で正しく表示するために得ることができない一つの特定の要素があります：私はそれを行う方法がですとFirefox。在庫はマージン左：23％（Firefoxの右端のレンダリング）が必要で、Firefoxは余白が残っています：30％（在庫が残っています）。私はpx値を試してみましたが、同じ問題が発生します。

だから、私は何をしようとしたことは次のとおりです。

@media only screen and (max-device-width: 480px) { 
[my mobile CSS] 
@-moz-document url-prefix([the domain]){ [Firefox Mobile adjustment] } 
}

これは動作しません。

@ -mozドキュメントルールを@mediaルールの外に置くと、それは完全に機能しますが、デスクトップFirefoxとモバイルにも影響します。しかし、@ -moz-documentの中に@mediaを入れ子にすることはできません。

Firefox MobileのみをCSSでターゲット設定する方法はありますか？

出典

2011-02-02 Zacqary Adam Green

ここでの問題は、Firefoxがで-ルールそのような入れ子に把握するように見えることができないということです：/ – BoltClock

BoltClockが正しいと思われます。 CSSだけでこれを行う方法はありません。

私は自分のページの<head>でこの<script>を入れていた：

if (navigator.userAgent.indexOf('Fennec') != -1) { 
document.write('<style> 
@media only screen and (max-device-width: 480px) { 
#sharebox{ margin-left:-30%;} 
}</style>');}

働いたこと。

出典

2011-02-04 16:54:51

あなたは '場合にdocument'に'「ontouchend」を使う必要があります'statement – vsync

は完全にでした。

@media only screen and (min-width:320px){ // media query 
    @-moz-document url-prefix() { // target FF 
     .selector { // Voila 
      my: styles; 
     } 
    } 
}

出典

2016-07-08 15:20:02

これは、モバイルとデスクトップの両方を対象としています。 – lowtechsun

使用

@media (-moz-touch-enabled){ 
    //style for FF with touch 
}

出典

2018-03-06 14:01:01

コードを明確に理解できるようにコードを記述することを検討してください。 –

答えて

関連する問題