サファリのスクロールを無効にしようとしています

Question

ランドスケープ版でスクロールせずにページを作成する必要があります。 ページの高さを100％にします。

私はすべてを試みました。 Safariでは、常に下の領域をスクロールします。 そして私は隠された領域を得ます。

下のバーを非表示にすることはできません。 私は身長を減らすことはできません。私はそれを320より小さくすることはできません。 ブラウザは、ページの下部に追加の白い領域を作成します。

（また、私はJSを使用することはできません）

私は誰の返事に感謝するでしょう。

P.S.スクリーンショットでは私のサイトではなく、効果を表示するだけです

Answer 1

これを達成するにはいくつかの方法があります。まず、ビューポート全体を塗りつぶした表を使用して、方向を切り替えるときに各要素が均等に配置されるようにすることができます。シンプルなCSSを使用してこれを解決することもできますので、より多くの制御ができ、メディアクエリを利用することができます。

は、あなたが全体のビューを満たす単一の親コンテナにすべてのコンテンツをラップする場合は、この作業fiddle

ファーストを参照してください。これにより、コンテンツがビューの外部に存在しないようになります。

HTML

<div class="wrapper"> 
    <div class="menu"> 
     The Menu 
    </div> 
    <div class="hero"> 
     The Hero 
    </div> 
    <div class="head"> 
     Text 
    </div> 
    <div class="content"> 
     This is content. 
    </div> 
</div> 

CSS

.wrapper { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 

ここから再スケーリングではなく、要素の比率を再計算するように、あなたは、親コンテナの一定割合を取るために各要素を設定することができますスクロールを強制する。

.menu, .hero, .head, .content { 
    position: absolute; 
    left: 0; 
    width: 100%; 
} 

.menu { 
    top: 0; 
    height: 10%; 
    background: #eee; 
} 

.hero { 
    top: 10%; 
    height: 20%; 
    background: #aee; 
} 

.head { 
    top: 30%; 
    height: 10%; 
    background: #eae; 
} 

.content { 
    top: 40%; 
    height: 60%; 
    background: #eea; 
} 

このように実装することで、ビューサイズが変更されたときに各要素の動作をさらに細かく制御できます。