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>
感謝を読むが、残念ながらそれは何も変更しませんでした。私はまだページの下をスクロールしてトップラインを外さない限り、トップラインのみを表示し、ボトムは隠れています。 – MrApnea
私はリンクを勉強しますが、ありがとう! – MrApnea