2017-06-07 14 views
0

iphoneで風景モードでページを表示すると問題が発生します(モデルSE​​でテストしますが、多くの人が他のiphoneで同じ問題を抱えているようです)。不正確な高さiphone

私は以下の例を作成しました。これは2行のテキストが上部に1つ、下部に1つのテキストを持つ単純なWebページです。

問題は、通常のモードでページを表示するとすべてがうまく見えますが、電話機をランドスケープモードで回転させると、アドレスバーが上部を覆い、ツールバーがページの下部を覆うことになります。私はアドレスバーの下で始まるようにページをスクロールするためにいくつかのjavascriptを追加しましたが、ページがスクロールされているので最後の行はツールバーの後ろに隠されています。

私は多くのメタタグとさまざまなCSSハックをテストしましたが、うまくいきません。

このページに行くときに両方のテキストが表示されるようにするには、スクロールする必要はありませんが、情報については、後でそのページを拡大して解決できないようにしたいページをズームする。

コード:meta viewport

、などの
<meta name="viewport" content="width=device-width, initial-scale=1"> 

を追加する

<html> 
<meta content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> 
<script> 
window.addEventListener("load",function() { 
    setTimeout(function(){ 
     window.scrollTo(0, 1); 
    }, 0); 
}); 
window.addEventListener("resize",function() { 
    setTimeout(function(){ 
     window.scrollTo(0, 1); 
    }, 0); 
}); 
</script> 
<style> 
div { 
     position: absolute; 
     bottom: 0; 
     margin: auto; 
} 
</style> 
<body> 
Top 
<div> 
Bottom 
</div> 
</body> 
</html> 

答えて

0

てみてください。また、ヘルプのためのUsing the Viewport

+0

感謝を読むが、残念ながらそれは何も変更しませんでした。私はまだページの下をスクロールしてトップラインを外さない限り、トップラインのみを表示し、ボトムは隠れています。 – MrApnea

+0

私はリンクを勉強しますが、ありがとう! – MrApnea

関連する問題