Question

我第一次拥有stackoverflowquestion的时间，因为这件事现在让我疯狂了一整天。我今天借了一个ipad来测试一个带有附加手机和平板电脑版本的网站。（这里只有safari）布局是一个具有一些图形的comlete静态东西，他们想要1：1。所以我了解移动设备，添加了一个

<meta name="viewport" content="width=x" />

并获得了手机的完美版本。但是当涉及到平板电脑时，我遇到了麻烦。

我得到的平板电脑设计是垂直的。它在这种情况下有477x656像素。所以它应该适合高度，并且可以在每个平板电脑中显示出漂亮，以纵向模式覆盖整个显示器，在横向模式下水平居中。

所以我想我只是放了一个

<meta name="viewport" content="height=656" />

在代码和浏览器中呈现的东西就像在移动版本上一样，只是我们的高度作为viewport-master而不是宽度。这将是一个完美的通用解决方案，可以像手机版一样解决客户需求。（当然不同的是，您可以在手机版中上下滚动，而平板电脑版本左右会有一些空白区域，特别是在横向模式下。）

css基本上是：

body {
    margin:0 auto;
    width:477px;
    height:656px;
}

结果是完全失败：

在横向模式下，页面垂直渲染大于浏览器中的可用空间。（这里似乎忽略了高度）
在纵向模式下，将大量的宽度添加到html标记中，以便只能看到一半的body标记。

将我的宽度添加到视口只会使浏览器忽略高度并且在手机版本中的行为应该如此。

所以我想，我强迫html-width

html { max-width:477px !important; }

左右，但没有帮助。所以我想，好吧，忘掉它并使用

解决肖像版本问题

html { margin:0 auto; }
@media (orientation:portrait) { html { margin:0; }}

所以，经过大量的绝望之后，我发现：添加一个viewport-meta height = x强制该页面为横向模式

这基本上（我猜）是由于safari根据给定的高度和屏幕比例（在横向模式下）而不是给定的html计算视口宽度。即使在纵向模式下也会产生景观比例......很奇怪。是的 - 它不是你所期望的，看起来像是一个浏览器对我来说。或者我在这里完全错了，误解了整个观点？

所以

如何强制浏览器正确使用它？根据我给定的高度根据我的html / css计算html宽度？
如何在横向模式下显示完整页面？为什么它变得更大？

任何提示高度赞赏！（我现在确实有点精疲力竭......事实证明，我已经不再使用软件而不能按照我的预期行事了）

嗯，所以这是我的test-szenario搞砸了：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="height=656" />
<style>
html { background-color:#8b8b8b; }
html { width:477px !important; }

@media (orientation:landscape){
    html { margin:0 auto; background-color:#e1006e; }
    #p { display:none; }
}
@media (orientation:portrait){
    html { background-color:#8f9d6a; }
    #l { display:none; }
}

body {
    position:relative;
    background-color:#000;
    margin:0 auto;
    padding:0;
    width:477px;
    height:656px;
}
.container {
    margin:0 auto;
    width:477px;
    height:656px;
    background-color:#232529;
    color:#9bbe0a;
}
.content { padding:250px 0 0 45px; }

.footer { position:absolute; left:22px; bottom:2px; }
.footer, .footer a, .footer a:link, .footer a:visited, .footer a:hover, .footer a:active { color:#9bbe0a; }
</style>
</head>
<body>
<div class="container">
    <div class="content">
        <p>stuff</p>
        <div id="l"><b>Landscape</b></div>
        <div id="p"><b>Portrait</b></div>
        <pre>
<script type="text/javascript">
document.write(
    '\r\rw.orientation: '+window.orientation+
    '\rscreen: '+screen.width+'x'+screen.height+
    '\rbody.client: '+document.body.clientWidth+'x'+document.body.clientHeight+
    '\rw.outer: '+ window.outerWidth+'x'+window.outerHeight+
    '\rw.inner: '+ window.innerWidth+'x'+window.innerHeight+
    '\rdocEl.client: '+document.documentElement.clientWidth+'x'+document.documentElement.clientHeight
);
</script>
        </pre>
    </div>
</div>
<div class="footer"><a href="#">blah</a> | <a href="#"">blah</a></div>
</body>
</html>

Answer 1

所以我厌倦了这个并写了一个javascript-hack。这是可能的，因为我在该布局上也有固定的宽度。不是我的解决方案类型，但是地狱是的...（并且它不能在ipad上的opera-mini中工作，因为它没有提供任何可用的尺寸...... - 我可以测试safari，dolphin和operamini） / p>

document.body.style.marginLeft = Math.floor((window.innerWidth - 477) / 2) + 'px';

为了安全起见，你应该css：

html { width:100%; }

我仍然对真正的解决方案感兴趣。（或有人告诉我，我在理解视口时错了。......或确认，这是一个浏览器）

如何获得方向：具有固定高度的元视口的纵向模式

1 个答案: