29

プロジェクトの 1 つで vh (viewport units) 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;
}
4

8 に答える 8

8

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

于 2014-04-23T15:18:21.003 に答える
8

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

これはheight:100vhと同じです。

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

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

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

サファリでチェックしました:)

于 2017-03-08T05:04:30.953 に答える
3

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

これらは、モバイルクロムで全画面ポップアップを作成しなければならなかった私の場合、モバイルブラウザーのアドレスバーの自動非表示の問題を解消します。

于 2017-09-02T06:35:04.323 に答える