Размер фона не работает в Opera Mini, несмотря на то, что Modernizr считает, что это должно - PullRequest
Новая
       29

Размер фона не работает в Opera Mini, несмотря на то, что Modernizr считает, что это должно

1 голос
/ 12 октября 2011

Я использую Modernizr , чтобы определить, поддерживают ли браузеры свойство CSS3 background-size для создаваемого мной мобильного сайта.

Я тестирую сайт в Opera Mini 6 Simulator на официальном сайте Opera , и Modernizr обнаруживает, что браузер поддерживает background-size, и добавляет класс 'BackgroundSize' элементу <html> соответственно.

Однако, когда я затем использую свойство background-size в моем CSS, оно не поддерживается.

Вот голова: 

<script src="modernizr.js" type="text/javascript"></script>

<style>

body {
  background:url('background.gif') no-repeat 0 0 #FFF;
}

.backgroundsize body {
  -o-background-size: 100% auto;
  background-size: 100% auto;
}  

</style>

И содержание тела 

<p>Content</p>   

<script>
if (Modernizr.backgroundsize == true) {alert("Background size is supported");}  
</script>

Я ожидаю, что одно фоновое изображение будет растянуто по всей ширине браузера, вместо этого оно повторяется; страницу можно посмотреть здесь - http://so.ajcw.com/mobile.htm

Полагаю, произошло одно из пяти: кто-нибудь знает причину и может предложить решение?

  1. Modernizr не работает должным образом и дал ложный положительный результат
  2. Opera Mini 6 неправильно сообщает Modernizr, что он поддерживает размер фона, когда он не
  3. Симулятор не является точной эмуляцией, а настоящий Opera Mini поддерживает фоновый размер
  4. Я неправильно написал свой код
  5. Или что-то еще?

Ответы [ 4 ]

2 голосов
/ 13 октября 2011
1 голос
/ 11 апреля 2014

Кажется, все изменилось. Для моей Opera Mini 7.5 на Android. 

Modernizr.backgroundsize == true;

И он правильно реагирует на значения в процентах, а также cover и contain.

1 голос
/ 09 января 2014

Я написал это как быструю работу: 

var isOperaMini = (navigator.userAgent.indexOf('Opera Mini') > -1);
if(isOperaMini) {
    var root = document.documentElement;
    root.className += " opera-mini";
}

Это добавляет класс "опера-мини" к элементу html. Поэтому вы можете ориентироваться на Opera Mini. Пример ниже: 

.icon {
    background-image: url("icon-social.svg");
    background-size: 32px;
}

html.opera-mini .icon,
html.no-svg .icon {
    background-image: url("icon-social.png");
}

Подробнее на: http://anthonydillon.com/blog/#sthash.VUV1hIy2.dpuf

0 голосов
/ 14 марта 2014

@ ответ Энтони не работает, так как он не сбрасывает / не удаляет свойство background-size для Opera Mini.Правильный способ сделать это: 

.class {
  -o-background-size:cover;
  -background-size:cover;
}
x:-o-prefocus, .class {
  -o-background-size:;
  background-size:;
}

x: -o-prefocus предназначен только для браузеров Opera.

...