web-dev-qa-db-ja.com

モバイルSafariでvh（viewport unit）cssを修正するには？

プロジェクトの1つでvh（ビューポートユニット）cssを使用しましたが、モバイルサファリでは機能しません。 Safariはvhの処理方法を認識していないようですが、他のブラウザでは正常に動作します。私はvhの有無にかかわらず同じ効果を作りたいです私を助けてください。ちなみに、私はfaceboxを使用しています。 （高さ：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;
}
cssheightmobile-safarilightboxviewport-units
17
Alvaro

今日この修正に出会いました： https://github.com/rodneyrehm/viewport-units-buggyfill vh/vwユニットのすべての要素をチェックし、pxに変換します。チェックアウトする価値は十分にあると思います。

8
Rembrand

それを修正するためにjQueryを使用できます。

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

これはすべてのブラウザで機能します。それが役に立てば幸い。

7
Koushik Das

私もこの問題を抱えていました。これが私の解決策です。

これはheight：100vh;

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

以下のコードをjQueryで使用することもできます。

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

サファリでチェック:)

6
Praneeth Nidarshan

今日、このCSSを使用したのはhaxのみで、うまくいきました。 iOS 8.2 iPhone Safari：

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

Thought： calcを使用すると、Safariはユニットをpx自体に変換するように見えます。これで、私のページはChromeおよびiOSのSafariで正しくフルブリードされます。

5
Cris

モバイルブラウザでフルスクリーンdivが必要な場合は、位置と高さを100％に固定してラッパーを使用してみてください。次に、ポップアップの高さを100％に設定します。高さおよび幅だけでなく、上、左、右、下のプロパティを使用して、好きな方法でラッパーとポップアップの位置を調整できます。

これにより、モバイルクロムでフルスクリーンポップアップを作成する必要があった私の場合、モバイルブラウザのアドレスバーの自動非表示に関する問題がなくなります。

2
vulp

このライブラリは非常に便利だと思いました： https://github.com/Hiswe/vh-check

正しいvhのオフセット値を計算し、css変数に入れて、cssで使用できるようにします。

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

私のバージョンは「querySelector」です。なぜなら、要素のクラス「getelementbyid」を使用した場合、機能しませんでした。そして、jQueryライブラリが接続されていない場合、このようにjsは最も普遍的です。 document.querySelector("your-element").style.height = window.innerHeight + 'px';

0
Володимир Хоменко

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`);
0
user2394342