Как настроить корректное отображение сайта на iPhone?

Question

[Yura0103]

Учусь делать сайты. На телефонах с Android все работает и отображается идеально. А вот на IPHON добавляется пустая область размером с экран смартфона с правой стороны. И почему-то картинки в слайдере увеличиваются в несколько раз (почти до пикселей)
Вот стили слайдера и html bootstrap carousel

<div class="row header">
			<div id="carouselExampleIndicators" class="carousel slide col-xl-12" data-ride="carousel">
				<ol class="carousel-indicators">
					<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
					<li data-target="#carouselExampleIndicators2" data-slide-to="1"></li>
					<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
				</ol>
				<div class="carousel-inner">
					<div class="carousel-item active sl-1">						
        			</div>						
					<div class="carousel-item sl-2">
					</div>
					<div class="carousel-item sl-3">
				  	</div>					
				</div>
			</div>		
		</div>

.carousel-inner {
	height: 100vh;
	width: 100%;
}
.carousel-item{
	height: 100%;
 	width: 100%;
 	display:table;
}
.slide{
	padding: 0px;
	margin: 0px;
}
.sl-1{
	background: url("/images/service/SLIDE-1.jpg") no-repeat  center fixed;
    background-size: cover;
	padding: 0px;
	margin: 0px;
}
.sl-2{
	background: url("/images/service/SLIDE-3.jpg") no-repeat  center fixed;
    background-size: cover;
	padding: 0px;
	margin: 0px;
}
.sl-3{
	background: url("/images/service/SLIDE-4.jpg") no-repeat  center fixed;
    background-size: cover;
	padding: 0px;
	margin: 0px;
}

Comments

[Andrey Vasilev]

Белая область от картинок и появляется, т.к. они выезжают за сает.
не сталкивался с bs c, но может быть дело в:
class="carousel slide col-xl-12"
насколько я понимаю col-xl-12 тут лишний.

[Yura0103]

Andrey Vasilev, а почему на Android все корректно работает ?

[Andrey Vasilev]

Yura0103, может брейкпоинт какой на пути ловит и начинает "адаптировать".

[alex-1917]

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

а еще есть айпады

[Владимир Юрченков]

alex-1917, согласен
Yura0103, проверьте в адаптиве, в том же хроме. От этого и нужно плясать.

[Yura0103]

alex-1917, был бы рад если бы Вы были правы. Но к сожалению вы ошибаетесь. Я проверял корректность верстки на 14 разных телефонах. Все корректно работает на
- Xiaomi Redmi Note 3 Android 5.1
- Xiaomi Redmi 4x Android 7.1
- Xiaomi Redmi Note 5A Android 7.1
- Xiaomi Mi 4C Android 5.1
- Xiaomi Mi A2 Lite Android 9
- Huawei Android 5.1
- Samsung J5 Android 7.1
- и еще две модели не вспомню какие
Косяки в верстке наблюдаются только на следующих гаджетах
- Iphon 5
- Iphon 6 (на одном гаджете была ОС IOS 12.3 , на втором нише версия, тосно не помню)
- Iphon 7 (Также два гаджета с разными ОС на одном IOS 12 на втором обновленная до последней версии IOS)
- Iphon X (Последняя версия ОС)
На все Iphon происходит пиксилизация слайдера, код в первом посте и появляется белая область

[alex-1917]

Yura0103, я и не утверждал ничего.
я озвучил вот так:

бьюсь об заклад

Answer 1

[alex-1917]

Погуглил за автора:
https://stackoverflow.com/questions/24154666/backg...

или даже далеко ходить не надо:
Как исправить проблему с отображения фона лендинга на ios?

Очень старая проблема и не только на iOS, а на большинстве браузеров для мобильных устройств в принципе. Суть в том, что использование background-attachment: fixed; сказывается на производительности и он тупо отключён в мобильных устройствах. Может однажды всё будет работать, но пока так. После нескольких лет поиска решения я пришёл к следующим выводам.

Короче говоря, поменьше занимайтесь херней,никто не смотрит на айфонах ваши глупые слайдеры, несущие 1,5% полезной информации...Отключайте параллаксы, мараллаксы и слайдеры для мобилок и будет вами конверсия и прибыль и счастье.

Comments

[Yura0103]

Ознакомился со статьей. Но у меня к сожалению ничего не сработало. Вместо слайдера на телефонах начал выводить картинку. Если я правильно понял статью выше. Для того что бы растянуть фоновую картинку на весь эран необходимо прописать следующий код CSS

.header:after{
      content:"";
      position:fixed; 
      top:0;
		width: 100%;
      height:100%; 
      left:0;
      right:0;
      z-index:0; 
      background: url("/images/service/SLIDE-1.jpg") center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

Так как у меня данная фоновая картинка только для части сайта параметр fixed меняю inherit.
Далее что бы остальное вписалось размеры экрана вставляю

html {
    height:100% !important;
}

body {
    height:100%;
    min-height:100%;
    overflow-x:hidden;
    overflow-y:auto;
    &.body-class {
        @media screen and (max-width:@screen-xs-max) {
            min-height:100vh;
            position:relative;
            &:before {
                position:fixed;
                top:0;
                left:0;
                right:0;
                bottom:0;
                display:block;
                content:"";
                z-index:-1;
                background-image:url(background-image.jpg);
                background-position:center;
                background-size:cover;
                -webkit-background-size:cover;
            }
        }
    }
}

Ссылка на источник
Проверял при помощи сервиса https://live.browserstack.com/dashboard#os=iOS&os_... вроде все растягивается... А на реальном устройстве все на пол экрана .
Весь код CSS который выше находится в медиазапросе media (max-width: 991px) {
Вот проблемный сайт https://vrabote.wsveles.com/