В настоящее время я разрабатываю адаптивный сайт с помощью Twitter Bootstrap.
Сайт имеет полноэкранное фоновое изображение на мобильном телефоне / планшете / компьютере. Эти изображения вращаются и исчезают, используя два деления.
Это почти идеально, за исключением одного вопроса. При использовании iOS Safari, Android Browser или Chrome на Android фон слегка подпрыгивает, когда пользователь прокручивает страницу вниз и скрывает адресную строку.
Сайт находится здесь: http://lt2.daveclarke.me/
Посетите его на мобильном устройстве и прокрутите вниз, и вы увидите, как изображение изменяется / перемещается.
Код, который я использую для фонового DIV, выглядит следующим образом:
#bg1 {
background-color: #3d3d3f;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; position:fixed;
width:100%;
height:100%;
left:0px;
top:0px;
z-index:-1;
display:none;
}
Все предложения приветствуются - это делает мою голову некоторое время !!
position: fixed
.Ответы:
Эта проблема вызвана сужением / сдвигом полос URL-адресов и изменением размера div # bg1 и # bg2, поскольку они имеют высоту 100% и «фиксированы». Так как фоновое изображение установлено на «покрытие», оно будет регулировать размер / положение изображения по мере увеличения области содержания.
Исходя из отзывчивости сайта, фон должен масштабироваться. Я принимаю два возможных решения:
1) Установите высоту # bg1, # bg2 равной 100vh. В теории это элегантное решение. Однако в iOS есть ошибка vh ( http://thatemil.com/blog/2013/06/13/viewport-relative-unit-strangeness-in-ios-6/ ). Я попытался использовать максимальную высоту, чтобы предотвратить проблему, но она осталась.
2) Размер области просмотра, определяемый Javascript, не зависит от панели URL. Поэтому Javascript можно использовать для установки статической высоты на # bg1 и # bg2 в зависимости от размера области просмотра. Это не лучшее решение, так как это не чистый CSS, и при загрузке страницы наблюдается небольшой скачок изображения. Однако это единственное жизнеспособное решение, которое я вижу, учитывая «vh» ошибки iOS (которые, похоже, не исправлены в iOS 7).
Кстати, я видел очень много проблем с этими изменяющимися панелями URL в iOS и Android. Я понимаю цель, но им действительно нужно продумать странную функциональность и хаос, которые они приносят на сайты. Последнее изменение - вы больше не можете «скрывать» строку URL при загрузке страницы на iOS или Chrome, используя приемы прокрутки.
РЕДАКТИРОВАТЬ: Хотя приведенный выше скрипт отлично работает для предотвращения изменения размера фона, он вызывает заметный разрыв, когда пользователи прокручивают страницу вниз. Это потому, что он поддерживает размер фона до 100% высоты экрана минус строка URL. Если мы добавим 60px к высоте, как предполагает швейцарец, эта проблема исчезнет. Это означает, что мы не видим нижние 60 пикселей фонового изображения при наличии панели URL, но это не позволяет пользователям когда-либо видеть пробел.
источник
bg.height(jQuery(window).height() + 60);
которая прекрасно работает на всех моих устройствах! Спасибо :)vh
единицы и, конечно100vh
, больше, когда адресная строка скрыта. Глупо, что этот скачок происходит после остановки прокрутки. Это выглядит просто глючно. В итоге я использовал переход на высоту, чтобы он выглядел намеренно.body
обертки,<div>
оборачивающей содержимое всей страницы. Никаких прыжковых фонов на iOS или Android!Я обнаружил, что ответ Джейсона не совсем подходит для меня, и я все еще прыгал. Javascript гарантировал отсутствие пробела в верхней части страницы, но фон все еще прыгал, когда адресная строка исчезала / появлялась снова. Так же как и исправление Javascript, я применил
transition: height 999999s
к div. Это создает переход с такой длительностью, что фактически замораживает элемент.источник
vw
илиvh
для установки размера шрифта внутри этого родительского контейнера.У меня похожая проблема в заголовке нашего сайта.
Это закончится скачкообразной прокруткой на Android Chrome, потому что .header-container перемасштабируется после того, как url-bar скрывается и палец убирается с экрана.
CSS-решение:
Добавление следующих двух строк предотвратит скрытие панели URL и вертикальную прокрутку:
источник
Проблема может быть решена с помощью медиа-запроса и некоторой математики. Вот решение для ориентации портрета:
Поскольку vh изменится после исчезновения панели URL, вам нужно определить высоту другим способом. К счастью, ширина области просмотра постоянна, и мобильные устройства имеют только несколько различных форматов изображения; если вы можете определить ширину и соотношение сторон, небольшая математика даст вам высоту окна просмотра именно так, как должен работать vh . Вот процесс
1) Создайте серию медиазапросов для соотношений сторон, на которые вы хотите ориентироваться.
используйте device-aspect-ratio вместо aspect-ratio, так как последнее изменится при исчезновении панели URL
Я добавил «max» в device-aspect-ratio, чтобы нацелить любые соотношения сторон, которые оказываются между самыми популярными. Они не будут такими точными, но они будут только для меньшинства пользователей и все еще будут довольно близки к правильному vh.
запомните медиа-запрос, используя горизонтальный / вертикальный, поэтому для переноса вам нужно будет перевернуть цифры
2) для каждого медиазапроса умножьте любой процент вертикальной высоты, в котором вы хотите, чтобы элемент был в vw, на обратную пропорцию.
3) Вы должны определить высоту URL-бара, а затем минус это от высоты. Я не нашел точных измерений, но я использую 9% для мобильных устройств в альбомной ориентации, и это, кажется, работает довольно хорошо.
Это не очень элегантное решение, но другие варианты тоже не очень хороши, учитывая, что они:
Ваш сайт кажется глючным для пользователя,
имеющие элементы неправильного размера, или
Использование JavaScript для некоторых основных стилей,
Недостатком является то, что некоторые устройства могут иметь разную высоту или соотношение сторон по URL-адресу, чем самые популярные. Однако, используя этот метод, если только небольшое количество устройств переносит / вычитает несколько пикселей, мне кажется, что это намного лучше, чем всем, у кого размер веб-сайта изменяется при перелистывании.
Чтобы сделать это проще, я также создал миксин SASS:
источник
@mixin vh-fix($vh: 100)
=>height: calc(100vw * (1.333 * $vh / 100) - 9%)
height: calc(100vw * (1.333 * #{$vh} / 100) - 9%)
-9%
.Все ответы здесь используют
window
высоту, которая зависит от строки URL. Все забыли оscreen
высоте?Вот мое решение jQuery:
Добавление
.css()
детали меняет неизбежно выровненный сверху элемент с абсолютным позиционированием на выровненный снизу, так что скачка вообще не происходит. Хотя, я полагаю, нет причин не просто добавлять это прямо в обычный CSS.Нам нужен анализатор пользовательского агента, потому что высота экрана на рабочих столах не поможет.
Кроме того, все это предполагает
#background
что элемент фиксированной позиции заполняет окно.Для пуристов JavaScript (предупреждение - не проверено):
РЕДАКТИРОВАТЬ: Извините, что это не отвечает непосредственно на вашу конкретную проблему с более чем одним фоном. Но это один из первых результатов при поиске этой проблемы фиксированных фоновых прыжков на мобильных устройствах.
источник
Я также столкнулся с этой проблемой, когда пытался создать экран входа, который бы охватывал весь видовой экран. К сожалению, принятый ответ больше не работает.
1) Элементы с установленной высотой
100vh
изменения размера каждый раз, когда изменяется размер области просмотра, включая те случаи, когда это вызвано (не) появлением панели URL.2)
$(window).height()
возвращает значения, на которые также влияет размер строки URL.Одно из решений состоит в том, чтобы «заморозить» элемент, используя
transition: height 999999s
предложенный в ответе AlexKempton . Недостатком является то, что это эффективно отключает адаптацию ко всем изменениям размера области просмотра, в том числе вызванным поворотом экрана.Поэтому мое решение - управлять изменениями области просмотра вручную с помощью JavaScript. Это позволяет мне игнорировать небольшие изменения, которые могут быть вызваны строкой URL, и реагировать только на большие.
РЕДАКТИРОВАТЬ: Я на самом деле использую эту технику вместе с
height: 100vh
. Страница отображается правильно с самого начала, а затем включается JavaScript и начинает управлять высотой вручную. Таким образом, не происходит мерцания во время загрузки страницы (или даже после).источник
height: 100vh
в исходном CSS, я устанавливаю,min-height:100vh
а затем изменяю размер окна, вычисляюmin-height
и устанавливаю его на высоту порта просмотра. Это удобно, когда ваш сайт просматривается на крошечных экранах, а его содержимое слишком велико, чтобы поместиться в окне просмотра. SetTimeout debounce / throttle для события resize помогает повысить производительность в некоторых браузерах (изменение размера срабатывает очень часто)min-height
вместо этого, но затем я столкнулся с проблемой, когда мне нужно было вертикально центрировать внутренний контент. Каким-то образом вертикальное центрирование может стать сложным, когда внешний элементheight
установлен вauto
. Поэтому я придумал фиксированную минимальную высоту, которой должно быть достаточно, чтобы вместить любой возможный контент, и установил ее в исходном CSS. Так какmin-height
имеет более высокий приоритет, чемheight
, он работает довольно хорошо.display: table
а затем установив внутренний контейнер наdisplay: table-cell
withvertical-align: middle
. Работал как шарм.Решение , которое я сейчас использую, чтобы проверить
userAgent
на ,$(document).ready
чтобы увидеть , если это один из оскорбляющих браузеров. Если это так, выполните следующие действия:$(window).resize
только обновите соответствующие значения высоты, если новое горизонтальное измерение области просмотра отличается от его начального значенияПри желании вы также можете проверить разрешение вертикальных размеров только тогда, когда они превышают высоту адресной строки.
Да, и адресная строка влияет
$(window).height
. См .: Изменения в адресной строке браузера Mobile Webkit (chrome) $ (window) .height (); Создание размера фона: каждый раз, когда JS "Window" width-height vs "screen" width-height?источник
Я нашел действительно простое решение без использования Javascript:
Все, что это делает, это задерживает движение, так что это невероятно медленно, что это не заметно.
источник
100%
,100vh
. IE8 - единственный крупный браузер, который не поддерживает переходы.Мое решение включало немного JavaScript. Оставьте 100% или 100vh на div (это позволит избежать появления div при начальной загрузке страницы). Затем, когда страница загрузится, возьмите высоту окна и примените ее к рассматриваемому элементу. Избегает прыжка, потому что теперь у вас есть статическая высота на вашем div.
источник
Я создал ванильное решение Javascript для использования единиц VH. Использование VH практически везде происходит за счет минимизации адресных строк при прокрутке. Чтобы исправить джанк, который показывает, когда страница перерисовывается, у меня есть этот js, который будет захватывать все ваши элементы, используя единицы VH (если вы дадите им класс
.vh-fix
), и давать им встроенную высоту пикселей. По сути заморозить их на высоте, которую мы хотим. Вы можете сделать это при повороте или изменении размера области просмотра, чтобы оставаться отзывчивым.Это решило все мои варианты использования, надеюсь, это поможет.
источник
Это мое решение для решения этой проблемы, я добавил комментарии непосредственно к коду. Я проверил это решение и работает отлично. Надеюсь, что мы будем полезны для всех, есть те же проблемы.
источник
Это лучшее решение (самое простое) из всех, что я пробовал.
... И это не сохраняет родной опыт адресной строки !
Вы можете установить высоту с помощью CSS, например, 100%, а затем установить высоту 0,9 * от высоты окна в пикселях с использованием JavaScript при загрузке документа.
Например, с помощью jQuery:
$("#element").css("height", 0.9*$(window).height());
)
К сожалению, нет ничего, что работает с чистым CSS: P, но также имейте это в виду
vh
и глючитvw
на iPhone - используйте проценты.источник
Я установил свой элемент ширины с помощью JavaScript. После того, как я установил de vh.
HTML
CSS
Javascript
Это работает для меня. Я не использую jquery и т. Д. потому что я хочу загрузить его как можно скорее.
источник
Потребовалось несколько часов, чтобы понять все детали этой проблемы и определить наилучшую реализацию. Оказывается, по состоянию на апрель 2016 года только iOS Chrome имеет эту проблему. Я пробовал на Android Chrome и iOS Safari - оба были в порядке без этого исправления. Итак, исправление для iOS Chrome, которое я использую:
источник
Простой ответ, если ваш фон позволяет, почему бы не установить background-size: что-то, что просто покрывает ширину устройства медиа-запросами и использовать рядом с: after position: fixed; взломать здесь .
IE: background-size: 901px; для любых экранов <900 пикселей? Не идеальный или отзывчивый, но на мобильном мне показалось обаяние <480px, так как я использую абстрактную фоновую музыку.
источник
Я использую этот обходной путь: исправить высоту bg1 при загрузке страницы с помощью:
Затем присоедините прослушиватель события resize к Window, который делает это: если разница в высоте после изменения размера меньше 60px (что-либо больше, чем высота панели URL), тогда ничего не делайте, а если она больше 60px, тогда снова установите высоту bg1 на высоту его родителя! полный код:
PS: эта ошибка так раздражает!
источник
Похоже на ответ @AlexKempton. (не могу прокомментировать извините)
Я использовал длинные задержки перехода, чтобы предотвратить изменение размера элемента.
например:
Компромисс с этим заключается в том, что он предотвращает изменение размера элемента, в том числе при вращении устройства, однако вы можете использовать некоторые JS для обнаружения
orientationchange
и сброса высоты, если это было проблемой.источник
Для тех, кто хотел бы слушать фактическую внутреннюю высоту и вертикальную прокрутку окна, пока мобильный браузер Chrome переводит строку URL с показа на скрытый и наоборот, единственное решение, которое я нашел, - это установить функцию интервала и измерить несоответствие
window.innerHeight
с его предыдущим значением.Это вводит этот код:
Я надеюсь, что это будет удобно. Кто-нибудь знает лучшее решение?
источник
Когда я сталкивался с подобной проблемой, я решил установить высоту элемента, чтобы
window.innerHeight
каждый раз происходилоtouchmove
событие.Это позволяет элементу охватывать ровно 100% доступного экрана постоянно, не больше и не меньше. Даже во время скрытия или показа адресной строки.
Тем не менее, жаль, что мы должны придумать такие патчи, где
position: fixed
должны работать простые .источник
Благодаря поддержке пользовательских свойств (переменных) CSS в iOS вы можете установить их с помощью JS и использовать их только на iOS.
источник
Мой ответ для всех, кто приходит сюда (как я), чтобы найти ответ на ошибку, вызванную скрытым адресом голым / интерфейсом браузера.
Скрывающаяся адресная строка вызывает событие resize. Но в отличие от других событий изменения размера, таких как переключение в ландшафтный режим, это не меняет ширину окна. Поэтому мое решение состоит в том, чтобы подключиться к событию resize и проверить, равна ли ширина.
источник