Как исправить vh (блок просмотра) css в мобильном Safari?

Я использовал vh (единицы просмотра) css в одном из своих проектов, но в мобильном сафари это не работает. Кажется, что Safari не знает, что делать с vh, но в других браузерах он работает нормально. Я хотел бы сделать такой же эффект с или без vh, пожалуйста, помогите мне. Кстати, я использую фейсбокс. (высота: 50% не работает нормально)

HTML:

 <div id="facebox" style="top: 0px; left: 0px; display: block;"> 
       <div class="popup">    
             <div class="body"> 
                  <div class="content_light">
            <div class="Lcontent_left"></div>
                    <div class="Lcontent_right">
                    <div class="Lright_content"></div>
                    </div>
                  </div>
              </div>
       </div>
    </div>

Это мой css:

#facebox .popup {
    display:block;
    position:relative;
margin:auto;
margin-top:0%;
  min-height:100vh;
  height:1px;
  border-radius:5px;
}

    #facebox .body {
  padding:0px;
  display:block;
  position:relative;
  background: #fff;
  width:100%;
  min-height:100vh;
  height:1px;
  margin:auto;
   border-radius:5px;
}
.Lcontent_left{
    position:relative;
    float:left;
    width:100%;
    height:50vh;
    /*min-height:250px;*/
    text-align:center;
    overflow:hidden;
    }
.Lcontent_left_fullscreen{
    display:none;
    }
.Lcontent_right{
    float:left;
    text-justify:inter-word;
    position:relative;
    width:100%;
    height:50vh;
    background-color:white;
    overflow:auto;
    font-family:"Open Sans",Helvetica,sans-serif;
    }
.Lright_content{
    position:relative;
    width:95%;
    margin:auto;
    margin-left:5px;
    overflow:auto;
    height:50vh;
    word-wrap:break-word;
    line-height: 1.5;
    font-size:16px;
    overflow:auto;
}

css mobile-safari lightbox height viewport-units
person Alvaro    schedule 22.04.2014    source источник

Ответы (8)


arrow_upward
9
arrow_downward

Вы можете использовать jQuery, чтобы исправить это.

$('container').height($(window).height()/2);

Это работает в каждом браузере. Надеюсь, поможет.

person Koushik Das    schedule 28.04.2016

arrow_upward
8
arrow_downward

Сегодня я наткнулся на это исправление: https://github.com/rodneyrehm/viewport-units-buggyfill Он проверяет каждый элемент для блока vh/vw и превращает его в px. Стоит проверить, я думаю.

person Rembrand    schedule 23.04.2014
comment
Это не работает в iOS Safari 10.3. github.com/rodneyrehm/viewport-units-buggyfill/issues/82 Наличие простого height: 100vh; по-прежнему занимает 1/4 экрана. Кажется, он работает (или ничего не делает) на рабочем столе. - person Chloe; 25.04.2017

arrow_upward
7
arrow_downward

У меня также была эта проблема, вот мое решение.

Это равно height:100vh;

document.getElementById("your-element").style.height = window.innerHeight + 'px';

Вы также можете использовать приведенный ниже код с jQuery,

$('your-element').height(window.innerHeight + 'px');

Проверено сафари :)

person Community    schedule 08.03.2017
comment
Из-за технической проблемы я предлагаю использовать версию jquery css: $("your-element").css("height",window.innerHeight + "px"); - person r1si; 08.05.2018

arrow_upward
7
arrow_downward

На CSS Tricks есть довольно хороший ответ — https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

.my-element {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);
person user2394342    schedule 05.09.2019

arrow_upward
6
arrow_downward

Сегодня я использовал только этот CSS-код, и он сработал. iOS 8.2 iPhone Сафари:

html, body {
    ...
    width: -webkit-calc(100% - 0px);
    ...
}

Мысль: кажется, что использование calc заставляет Safari самостоятельно преобразовывать единицы измерения в px. Теперь моя страница корректно отображается в Chrome и Safari на iOS.

person Cris    schedule 22.03.2015
comment
Это, вероятно, не будет работать в Firefox, Opera, IE или других браузерах, отличных от WebKit. - person Chloe; 25.04.2017

arrow_upward
2
arrow_downward

Если вам нужен полноэкранный div в мобильных браузерах, попробуйте использовать обёртку с фиксированной позицией и высотой, установленными на 100%. Затем установите 100% высоты всплывающего окна. Вы можете настроить положение обертки и всплывающего окна так, как вам нравится, с верхним, левым, правым, нижним свойствами, а также высотой и шириной.

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

person vulp    schedule 02.09.2017

arrow_upward
1
arrow_downward

Я нашел эту библиотеку очень полезной: https://github.com/Hiswe/vh-check

Он рассчитает значение смещения для правильного vh и поместит его в переменную css, чтобы вы могли использовать его в css:

.main {
  height: calc(100vh - var(--vh-offset, 0px));
}
person apptaro    schedule 18.10.2018

arrow_upward
0
arrow_downward

Моя версия "querySelector", потому что: если я использую класс элемента, "getelementbyid" не работает. И этот способ js наиболее универсален, если библиотеки jQuery не подключены. document.querySelector("your-element").style.height = window.innerHeight + 'px';

person Володимир Хоменко    schedule 23.11.2018