Firefox Мобильный CSS - PullRequest
Новая
       30

Firefox Мобильный CSS

1 голос
/ 02 февраля 2011

Я тестировал мобильную версию своего сайта в браузере Android.Я делаю это с помощью: 

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

Теперь я начал тестировать его в бета-версии Firefox Mobile, и есть один конкретный элемент, который я не могу найти в обоих случаях.стоковый браузер и 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-document вне правила @media, оно отлично работает, но влияет как на настольный Firefox, так и на мобильный.Вложение @media внутри @ -moz-document, однако, не.

Есть ли какой-нибудь рабочий способ нацеливаться только на Firefox Mobile с CSS?

Ответы [ 3 ]

0 голосов
/ 08 июля 2016

Это сработало идеально для меня. 

 @media only screen and (min-width:320px){ // media query 
     @-moz-document url-prefix() { // target FF
         .selector { // Voila
             my: styles;
         }
     }
 }
0 голосов
/ 06 марта 2018

использование 

@media (-moz-touch-enabled){
    //style for FF with touch
}
0 голосов
/ 04 февраля 2011

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>');}

Это сработало.

...