Фон не фиксируется на мобильных [дубликатов]

Другое событие NullPointerException возникает, когда объявляется массив объектов, а затем сразу же пытается разыменовать его внутри.

String[] phrases = new String[10];
String keyPhrase = "Bird";
for(String phrase : phrases) {
    System.out.println(phrase.equals(keyPhrase));
}

Этот конкретный NPE можно избежать, если порядок сравнения отменяется ; а именно, использовать .equals для гарантированного непустого объекта.

Все элементы внутри массива инициализируются их общим начальным значением ; для любого типа массива объектов, это означает, что все элементы null.

Вы должны инициализировать элементы в массиве перед доступом или разыменованием их.

String[] phrases = new String[] {"The bird", "A bird", "My bird", "Bird"};
String keyPhrase = "Bird";
for(String phrase : phrases) {
    System.out.println(phrase.equals(keyPhrase));
}

24
задан user2874270 15 October 2014 в 00:33
поделиться

14 ответов

См. мой ответ на этот вопрос: Обнаружение поддержки привязки к фону: исправлено?

  • Обнаружение сенсорной способности само по себе не работает для ноутбуков с сенсорными экранами, и код для обнаружения прикосновения Кристины не будет работать на некоторых устройствах.
  • Ответ Гектора будет работать, но анимация будет очень изменчивой, поэтому лучше заменить фиксированную прокруткой на устройствах, которые не поддерживают фиксированные.
  • К сожалению, Taylon неверно, что iOS 5+ поддерживает привязку фона: исправлено. Это не. Я не могу найти список устройств, которые не поддерживают фиксированные фоны. Вероятно, большинство мобильных телефонов и планшетов этого не делают.
1
ответ дан Community 19 August 2018 в 06:50
поделиться

Благодаря усилиям Винсента и работы Joey Hayes, у меня есть этот codepen , работающий на мобильном телефоне Android, который поддерживает несколько фиксированных фонов

HTML:

<html>

<body>
  <nav>Nav to nowhere</nav>
  <article>

    <section class="bg-img bg-img1">
      <div class="content">
        <h1>Fixed backgrounds on a mobile browser</h1>
      </div>
    </section>

    <section class="solid">
      <h3>Scrolling Foreground Here</h3>
    </section>

    <section>
      <div class="content">
        <p>Quid securi etiam tamquam eu fugiat nulla pariatur. Cum ceteris in veneratione tui montes, nascetur mus. Quisque placerat facilisis egestas cillum dolore. Ambitioni dedisse scripsisse iudicaretur. Quisque ut dolor gravida, placerat libero vel,
          euismod.
        </p>
      </div>
    </section>

    <section class="solid">
      <h3>Scrolling Foreground Here</h3>
    </section>

    <section class="footer">
      <div class="content">
        <h3>The end is nigh.</h3>
      </div>
    </section>

  </article>
  </body>

CSS:

* {
  box-sizing: border-box;
}

body {
  font-family: "source sans pro";
  font-weight: 400;
  color: #fdfdfd;
}
body > section >.footer {
  overflow: hidden;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 70px;
  width: 100%;
  background-color: silver;
  z-index: 999;
  text-align: center;
  font-size: 2em;
  opacity: 0.8;
}

article {
  position: relative;
  font-size: 1em;
}

section {
  height: 100vh;
  padding-top: 5em;
}

.bg-img::before {
  position: fixed;
  content: ' ';
  display: block;
  width: 100vw;
  min-height: 100vh;  
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-position: center;
  background-size: cover;
  z-index: -10; 
}

.bg-img1:before {
      background-image: url('https://res.cloudinary.com/djhkdplck/image/upload/v1491326836/3balls_1280.jpg');
}
.bg-img2::before {
      background-image: url('https://res.cloudinary.com/djhkdplck/image/upload/v1491326840/icebubble-1280.jpg');
}
.bg-img3::before {
      background-image: url('https://res.cloudinary.com/djhkdplck/image/upload/v1491326844/soap-bubbles_1280.jpg');
}

h1, h2, h3 {
  font-family: lato;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.content {
  max-width: 50rem;
  margin: 0 auto;
}
.solid {
  min-height: 100vh;
  width: 100%;
  margin: auto;
  border: 1px solid white;
  background: rgba(255, 255, 255, 0.6);
}

.footer {
  background: rgba(2, 2, 2, 0.5);
}

JS / JQUERY

window.onload = function() {

  // Alternate Background Page with scrolling content (Bg Pages are odd#s)
  var $bgImg = $('.bg-img');
  var $nav = $('nav');
  var winh = window.innerHeight;
  var scrollPos = 0;
  var page = 1;
  var page1Bottom = winh;
  var page3Top = winh;
  var page3Bottom = winh * 3;
  var page5Top = winh * 3;
  var page5Bottom = winh * 5;

  $(window).on('scroll', function() {

    scrollPos = Number($(window).scrollTop().toFixed(2));
    page = Math.floor(Number(scrollPos / winh) +1);
    if (scrollPos >= 0 && scrollPos < page1Bottom ) {    
      if (! $bgImg.hasClass('bg-img1')) {

        removeBg( $bgImg, 2, 3, 1 ); // element, low, high, current
        $bgImg.addClass('bg-img1');
      }
    } else if (scrollPos >= page3Top && scrollPos <= page3Bottom) {
      if (! $bgImg.hasClass('bg-img2')) {

        removeBg( $bgImg, 1, 3, 2 ); // element, low, high, current
        $bgImg.addClass('bg-img2');
      }
    } else if (scrollPos >= page5Top && scrollPos <= page5Bottom) {
      if (! $bgImg.hasClass('bg-img3')) {

        removeBg( $bgImg, 1, 2, 3 ); // element, low, high, current
        $bgImg.addClass('bg-img3');
      }
    }
    $nav.html("Page# " + page + " window position: " + scrollPos);

  });
}

// This function was created to fix a problem where the mouse moves off the
// screen, this results in improper removal of background image class. Fix
// by removing any background class not applicable to current page.
function removeBg( el, low, high, current ) {
  if (low > high || low <= 0 || high <= 0) {
    console.log ("bad low/high parameters in removeBg");
  }
  for (var i=low; i<=high; i++) {
    if ( i != current ) { // avoid removing class we are trying to add
      if (el.hasClass('bg-img' +i )) {
        el.removeClass('bg-img' +i );
      }
    }
  } 
} // removeBg()
1
ответ дан Eggs 19 August 2018 в 06:50
поделиться

Я думаю, что мобильные устройства не работают с фиксированными позициями. Вы должны попробовать с помощью некоторого js-плагина, например skrollr.js (например). С помощью такого типа плагина вы можете выбрать положение своего div (или любого другого) в функции положения полосы прокрутки.

0
ответ дан Héctor 19 August 2018 в 06:50
поделиться

"background-size: cover;" вызывает много проблем во всех мобильных браузерах, кроме Firefox!

Это исправило мою проблему:

/* Mobile first */
body{
    background-image: url(bg_mobile.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Then tablets, laptops and desktops (768px and up) */
@media screen and (min-width:768px) {
body{
    background-image: url(bg.jpg);
    background-size: cover;
    }
}
0
ответ дан Matthew C 19 August 2018 в 06:50
поделиться

Я нашел возможно лучшее решение для эффекта параллакса, которое работает на всех устройствах.

Главное - установить все разделы с z-индексом больше, чем параллакс.

И элемент изображения параллакса для установки фиксированного с максимальной шириной и высотой

body, html { margin: 0px; }
section {
  position: relative; /* Important */
  z-index: 1; /* Important */
  width: 100%;
  height: 100px;
}

section.blue { background-color: blue; }
section.red { background-color: red; }

section.parallax {
  z-index: 0; /* Important */
}

section.parallax .image {
  position: fixed; /* Important */
  top: 0; /* Important */
  left: 0; /* Important */
  width: 100%; /* Important */
  height: 100%; /* Important */
  background-image: url(https://www.w3schools.com/css/img_fjords.jpg);
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
<section class="blue"></section>
<section class="parallax">
  <div class="image"></div>
</section>
<section class="red"></section>

1
ответ дан Nebojsa Sapic 19 August 2018 в 06:50
поделиться

Это то, что я делаю, и он работает каждый :)

.container {
  background: url(${myImage})
  background-attachment: fixed;
  background-size: cover;
 transform: scale(1.1, 1.1);

}

then ...

@media only screen and (max-width: 768px){
   background-size: 100% 100vh;
}
0
ответ дан pjdux 19 August 2018 в 06:50
поделиться

У меня такая же проблема, но теперь она работает. Все, что мне нужно было сделать, это добавить background-size: cover !important;, и он работает на моем устройстве Android!

Весь код выглядит так:

body.page-id-8 #art-main {
  background: #000000 url("link to image") !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  background-attachment: fixed !important;
  background-color: transparent !important;
  background-size: cover !important;
}

Спасибо большое @taylan derinbay и @Vincent!

0
ответ дан rink.attendant.6 19 August 2018 в 06:50
поделиться
  • 1
    Это не похоже на работу с Google Nexus с Nougat. – John Smith 24 May 2017 в 03:50

Фиксированное позиционирование поддерживается на мобильных устройствах с Android 2.2 и iOS 5.

Вам нужно использовать устройство с окном просмотра на мета и дать фоновое изображение где-нибудь с идентификатором. Затем вы получите этот id с jquery и дадите высоту. И, конечно, 100% ширина

<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #main {
          background: url(1.jpg) no-repeat center center fixed;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          width: 100%;
          overflow: hidden;
        }
    </style>
</head>
<body id="main">

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
    var hgt = $(window).height();
    $("#main").css("height", hgt)
</script> 

http://jsfiddle.net/talendil/oackpmv5/

0
ответ дан Taylan Derinbay 19 August 2018 в 06:50
поделиться

Я опаздываю на вечеринку, но это (невероятно) все еще проблема с 11.05.2017. Вот простое решение, которое также будет работать кросс-платформенно с линейными градиентами:

.backgroundFixed {
  background: linear-gradient(160deg, #2db4a8 0%, #13af3d 100%);
  background-size: 100vw 100vh;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: -1000;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
  </head>
  <body>
    <div class="backgroundFixed"></div>
    <div class="paragraphContainer">
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
      <p>We're here to make the body scroll</p>
    </div>
  </body>
</html>

0
ответ дан Tom 19 August 2018 в 06:50
поделиться
  • 1
    тестируется на iOS 11 и 10, и он не работает над обоими. – SpaceDog 15 September 2017 в 02:04

Я нашел отличное решение для фиксированных фонов на мобильных устройствах, не требующих вообще никакого JavaScript.

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(photos/2452.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Обратите внимание на отрицательное значение z-index для -10. html по умолчанию для корневого элемента z-index есть 0. Это значение должно быть наименьшим z-index, чтобы иметь его как фон.

75
ответ дан Vincent 19 August 2018 в 06:50
поделиться
  • 1
    Хороший человек! Пока это единственное решение для iOS, которое работает. – asimovwasright 20 February 2016 в 17:56
  • 2
    должны быть приняты, подтверждены работы в последней версии opera mini, chrome mobile и firefox mobile. – user1931751 1 November 2016 в 15:28
  • 3
    безусловно, лучшее решение. Спасибо большое! – Keen Wong 19 November 2016 в 07:56
  • 4
    Это единственное рабочее решение! Что вы – Bedo 4 January 2017 в 00:45
  • 5
    ok на android, когда вы помещаете изображение, адресная строка сверху занимает некоторое место, когда вы прокручиваете вниз, он принимает пробел, эквивалентный адресной строке, а затем через секунду удаляет пробелы и получает изображение, чтобы покрыть эту область – DragonFire 21 March 2017 в 23:47

Я два дня пытался использовать разные сообщения и методы, пытаясь понять это. Я призываю всех к START, глядя на сообщение Яйца, и возиться с кодепином, который он и другие создали.

Это было единственное решение, которое я нашел для себя правильно. Я рекомендую его ответ в качестве решения / хорошей отправной точкой для тех, кто из нас все еще выясняет эту проблему в наших собственных веб-приложениях.

Я еще не получил достаточной репутации, чтобы прокомментировать его сообщение, иначе я бы. Я даже не могу проголосовать за это, но я тоже это сделаю.

Это фактический код, который я использовал:

html::before {
    content: ' ';
    display: block;
    background-image: url('path-to-your-image');
    background-position: bottom left; 
    /*For my instance this is how I have built my bg image. Indexes off the 
bottom left for consistency*/
    background-size: cover;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: -10; 
    /*I haven't tested my full app functionality after changing the z-index, but everything appears to work flawlessly right now.*/
}

Я попробовал все с его оригинальным кодом. Когда у меня был

background-position: center; 

хром (при последнем обновлении Android от 1/8/18), он будет отставать от обновления положения изображения, поэтому при прокрутке веб-сайта будет патч цвета, navbar / URL-адрес браузера. Затем он исчезнет после того, как браузер пересчитает центр изображения (это то, что я предполагаю, что это происходит).

Итак, я рекомендую сделать изображение вокруг вашего нижнего колонтитула или заголовка, как я, и установить верхний левый / правый или внизу слева / справа для вашей позиции.

Итак, ЭТО РАБОТАЕТ для меня. Поэтому попробуйте, если вы читаете это далеко, и ничего еще не сработало. Хотя вы уже должны были ударить исходный пост.

Спасибо, Яйца, и другие товарищи, с которыми вы сотрудничали в своем кодеде.

1
ответ дан Willie 19 August 2018 в 06:50
поделиться

У меня было очень простое решение для этого, после борьбы со всеми методами исправления этого.

У меня была проблема на мобильных устройствах IOS.

css (рабочий стол)

#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {
background-size: auto;
background-attachment: fixed;
}

.widget-wrap {
background-attachment: scroll;
}

Затем я перезаписываю его с помощью медиа-запроса, удаляя «фиксированный» в качестве привязки к фону.

css (mobile)

@media (max-width: 767px) {
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {

    background-attachment: initial;

}
}

initial - присваивает этому свойству значение по умолчанию. Я думаю, потому что IOS не принимает «фиксированный», он возвращается к значению по умолчанию, которое он принимает, прокручивает.

Это работало для меня на каждом устройстве. Надеюсь, это тоже поможет кому-то другому.

4
ответ дан Ylama 19 August 2018 в 06:50
поделиться
  • 1
    к сожалению, это решение, основанное на размере, не очень хорошо. Это не сработает, если я просмотрю пейзаж с помощью iPad, особенно если я использую iPad Pro 12 & quot; это 1024x1366 ... и btw ваши тесты кода для 767 пикселей, но обычный iPad - 768. – SpaceDog 15 September 2017 в 02:03
  • 2
    @SpaceDog Затем просто добавьте медиа-запрос на основе этого устройства. это было только для того, чтобы получить идею решения. – Ylama 15 September 2017 в 07:04
  • 3
    в любом случае решение не работает. Я тестировал iPad на IOS 10 и 11, и изображение продолжает прокручиваться. – SpaceDog 15 September 2017 в 14:34
1
ответ дан Community 30 October 2018 в 18:56
поделиться
1
ответ дан Mrinal Jain 30 October 2018 в 18:56
поделиться
Другие вопросы по тегам:

Похожие вопросы: