Подтвердить что ты не робот

Предотвращение фонового изображения фиксированной позиции: обложка от изменения размера в мобильных браузерах по адресу bar hide

Извините за отсутствие примера на этом, но я считаю, что это достаточно легко понять.

У меня есть фиксированный фон на моем сайте, который в настоящее время выполняется следующим образом:

#background {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #28305e;
    background-image: url(../images/background.jpg);
    background-size: cover;
    -moz-background-size: cover;
    background-position: center center;
    z-index: -10;
}

<div id="background"></div>

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

Любые идеи или стратегии по работе над этим или реализации фона по-другому?

Я мог бы обернуть все содержимое в фиксированном контейнере и установить переполнение-y для прокрутки, что предотвращает скрытие адресной строки, но я бы предпочел не делать этого (Google Glass не может прокручивать те контейнеры, ха-ха... Хотелось бы и демо на нем).

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

РЕДАКТИРОВАТЬ: я действительно реализовал это и подробно описал процесс в ответе ниже. Однако даже с этой настройкой буфера (которая увеличивает высоту фонового изображения на 60 пикселей больше, чем высота окна просмотра), при скрытии адресной строки он по-прежнему показывает пустой сегмент фона, который открывается, и как только вы остановить прокрутку, он отображает остальную часть фонового изображения.

Ищете способ сохранить скрытую функциональность адресной строки (которая теперь расширена до iOS Safari на iPad в iOS 8), а также полноэкранное фоновое изображение, которое всегда полностью отображается, даже если видовой экран меняет высоту, когда скрывая адресную строку. Исследуя, нужно ли мне просто регистрировать отчеты об ошибках для всех браузеров...

4b9b3361

Ответ 1

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

html {
    background: url(../img/bg.jpg) no-repeat center center fixed;
    background-size: cover;
    height: 100%;
    overflow: hidden;
}

Затем установите прокрутку в тело.

body {
    height: 100%;
    overflow: scroll;
}

Вам по-прежнему нужен фоновый div для IE 8, поскольку он не поддерживает свойство фона, поэтому мобильные браузеры должны его скрыть. Самый чистый способ сделать это - использовать IE 8 неспособность прочитать медиа-запрос

@media only screen { #background { display: none; }}

Ответ 2

В итоге я создал обходное решение для мобильных устройств. Он не может грамотно деградировать, но в настоящее время он работает хорошо.

window.mobilecheck = function() {
  var check = false;
  (function(a){if(/(android|bb\d+|meego).+mobile|android|ipad|playbook|silk|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
 }

 if (window.mobilecheck() == true) {
  var newHeight = $(window).height() + 70;
  $("#background").css("height", newHeight);
 }

Я обнаружил, что функция mobilecheck в Интернете (http://detectmobilebrowsers.com/). Если он вернет true, я возьму свой фиксированный контейнер фонового изображения и добавлю 70 к его высоте. Затем, когда вы перетаскиваете экран вверх, а адресная строка веб-браузера автоматически скрывается (тем самым увеличивая высоту окна), он имеет достаточную дополнительную высоту, так что размер фона: на обложке нет необходимости резче изменять размер фонового изображения, чтобы он снова соответствовал экрану.

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

EDIT: Однако это обходное решение представляет эту проблему: CSS CHALLANGE: Фоновое изображение со 100% высотой - Белое пространство при прокрутке мобильного телефона

Ответ 3

Для тех, кто еще ищет ответ, вы можете использовать новые атрибуты vw и vh с элементом position: fixed.

Это прокручивается, когда адресная строка перемещается/сжимается/и т.д., а затем остается фиксированной на странице.

#bgimg {
  display: block;
  background: no-repeat url(bg.png);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 120vh;
}

Ответ 4

Сложно сказать без примера, но вам может не хватать width:100%, который должен остановить изменение размера с помощью полосы прокрутки.

Еще один способ реализовать фиксированный фон на мобильном устройстве - иметь фоновый div с position: absolute и overflow: hidden и всеми вашими другими реализациями фона. Затем иметь div с содержанием overflow-y:scroll; и установить высоту содержимого div используя jquery или любой другой метод, который вы выбрали для получения высоты окна.

В качестве примера рассмотрим JS Fiddle.

Ответ 5

Я сделал это. Я обнаружил, что если вы никогда не прокручиваете тело/окно, вы никогда не запускаете autohide для Chrome. Поэтому оберните содержимое в более крупный div и просто прокрутите его, и автогид не запускается. НО ТАКЖЕ!!! Автогид не запускается. (Адреса всегда есть). Не сомневаюсь, что во-вторых вы можете скрыть адресную строку после этого, но тогда как пользователь получит адресную строку обратно?

html, body {
  height: 100%; 
  overflow: hidden;
}
body {
  height: 100%;
}
#background {
  position: fixed;
  left: 50%;
  bottom: 0px;
  min-width: 100%;
  min-height: 120%;
  z-index: 0;
  background: url('background.gif');
  margin-left: -50%;
  background-position: center center;
  background-attachment: fixed;  
  background-size: cover;
}
#main_container {
  width: inherit;
  height: inherit;
  overflow-y: scroll;
}
.block {
  position: relative;
  text-align: center;
  background: transparent;
  height: 100%;
  z-index: 9;
}
.block {
  width: 100%;
  height: 100%;
  background: rgba(224, 224, 224, 0.4);
}
.block::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
}
.centered {
  display: inline-block;
  vertical-align: middle;
}

<div id="main_container">
  <div class="block" >
    <div class="centered">
      <h1 class="circle">Some text</h1>
    </div>
  </div>
  <div class="block">  
    <div class="centered">
      <h1>Some text</h1>
    </div>
  </div>
  <div class="block">  
    <div class="centered">
      <h1>Some text</h1>
    </div>
  </div>
  <div class="block">  
    <div class="centered">
      <h1>Some text</h1>
    </div>
  </div>
  <div class="block" >
    <div class="centered">
      <h1>Some text</h1> 
    </div>
  </div>
</div>
<div id="bg"></div>