1

是我第一次自己的stackoverflow问题的时候了，因为这件事让我一整天都在发疯。我今天借了一个 ipad 来测试一个带有额外手机和平板电脑版本的网站。（上面只有野生动物园）布局是一个带有一些图形的完全静态的东西，他们希望它是 1:1。所以我了解了移动设备，添加了一个

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

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

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

所以我想我只是放了一个

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

在代码中，浏览器会像在移动版本上一样呈现事物，只是将我们的高度作为视口主控而不是宽度。这将是一个完美的通用解决方案，就像手机版本一样解决客户的需求。（嗯，当然不同的是，你会在手机版中上下滚动，而平板电脑版的左右会有一些空白，尤其是在横向模式下。）

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 宽度？
  • 以及如何让整个页面以横向模式显示？为什么它更大？

任何提示高度赞赏！（我现在确实有点筋疲力尽了......事实证明，我不再习惯于软件不符合我的预期）

嗯，所以这是我的测试场景：

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

1 回答 1

0

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

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

为了安全起见，您应该使用css：

html { width:100%; }

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

于 2013-03-14T01:13:58.760 回答