2

Android ブラウザで自分の Web サイトのモバイル バージョンをテストしています。私がそれを行う方法は次のとおりです。

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

今、私は Firefox Mobile ベータ版でテストを開始しましたが、ストック ブラウザーと Firefox の両方で正しく表示できない特定の要素が 1 つあります。stock には margin-left: 23% が必要 (Firefox では右端にレンダリングされます)、Firefox には margin-left: 30% (ストックには左端にレンダリングされます) が必要です。px 値を試してみましたが、同じ問題が発生します。

だから、私がやろうとしたことは次のとおりです。

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

これはうまくいきません。

@-moz-document ルールを @media ルールの外に置くと、完全に機能しますが、モバイルだけでなくデスクトップ Firefox にも影響します。ただし、@-moz-document 内に @media を入れ子にすることはできません。

CSS を使用して Firefox Mobile のみをターゲットにする有効な方法はありますか?

4

4 に答える 4

0

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

<script>これを自分のページに入れなければなりませんでした<head>:

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

それはうまくいきました。

于 2011-02-04T16:54:51.353 に答える
0

これは私にとって完璧に機能しました。

 @media only screen and (min-width:320px){ // media query 
     @-moz-document url-prefix() { // target FF
         .selector { // Voila
             my: styles;
         }
     }
 }
于 2016-07-08T15:20:02.990 に答える