Question

在iphone上以横向模式查看页面时遇到问题（在SE型号上进行测试，但似乎很多人在使用其他iphone时遇到同样的问题）。

我在下面做了一个例子，它是一个简单的网页，有两行文本，一个文本在顶部，一个在底部。

问题在于，当我以正常模式查看页面时，一切看起来都很好，但是当以横向模式旋转手机时，地址栏覆盖顶部，工具栏覆盖页面底部。我添加了一些javascript来滚动页面，使其从地址栏开始，但由于页面现在向下滚动，最后一行隐藏在工具栏后面。

我测试了很多meta标签和不同的css hacks，但没有好处。

我只想要在转到此页面时显示两个文本，我不想要滚动，但仅仅是为了信息我希望以后可以在页面上放大以便解决方案无法阻止缩放在页面上。

代码：

<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>

Answer 1

尝试添加meta viewport之类的，

<meta name="viewport" content="width=device-width, initial-scale=1">

另请阅读Using the Viewport

iphone

1 个答案: