Fatal编程技术网
  • html/
  • Html 如何获得方向：具有固定高度元视口的纵向模式

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

html

Html 如何获得方向：具有固定高度元视口的纵向模式,html,height,media-queries,tablet,viewport,Html,Height,Media Queries,Tablet,Viewport,是时候问我自己的第一个问题了，因为这件事让我一整天都在发疯。今天我借了一台ipad来测试一个网站，它附带了额外的手机和平板电脑版本。（上面只有safari）布局是完全静态的，带有一些图形，他们想要1:1。 所以我学习了移动设备，补充道 <meta name="viewport" content="width=x" /> 结果是彻底失败： 在横向模式下，页面垂直呈现时比浏览器中的可用空间大。（这里似乎忽略了高度） 在纵向模式下，大量的宽度被添加到html标记中，这样主体标记只能看到

是时候问我自己的第一个问题了，因为这件事让我一整天都在发疯。今天我借了一台ipad来测试一个网站，它附带了额外的手机和平板电脑版本。（上面只有safari）布局是完全静态的，带有一些图形，他们想要1:1。 所以我学习了移动设备，补充道

<meta name="viewport" content="width=x" />
结果是彻底失败：

  • 在横向模式下，页面垂直呈现时比浏览器中的可用空间大。（这里似乎忽略了高度）
  • 在纵向模式下，大量的宽度被添加到html标记中，这样主体标记只能看到一半
将“我的宽度”添加到视口只会使浏览器忽略高度，其行为与手机版本中的行为类似

所以我想，我强制html宽度

html { max-width:477px !important; }
大概是这样，但没有帮助。 所以我想，好吧，忘了它，用

html { margin:0 auto; }
@media (orientation:portrait) { html { margin:0; }}
因此，在经历了大量的绝望之后，我发现：添加一个viewport meta height=x会迫使页面处于横向模式

这基本上（我猜）是因为safari根据给定的高度和屏幕比例（在横向模式下）计算视口宽度，而不是给定的html。即使在纵向模式下也会产生横向比例。。。够奇怪的了。是的，这不是你所期望的，在我看来像是个骗子。还是我完全错了，误会了整件事

所以

  • 如何强制浏览器使其正确？根据我给定的高度，根据我的html/css计算html宽度
  • 如何以横向模式显示整个页面？为什么它更大
任何提示都非常感谢！（我现在确实有点筋疲力尽了……事实证明，我不再习惯于软件不按我的预期运行）

嗯，这是我的测试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>


html{背景色：#8b；}
html{宽度：477px！重要；}
@媒体（方向：景观）{
html{margin:0自动；背景色：#e1006e；}
#p{显示：无；}
}
@媒体（方向：纵向）{
html{背景色：#8f9d6a；}
#l{显示：无；}
}
身体{
位置：相对位置；
背景色：#000；
保证金：0自动；
填充：0；
宽度：477px；
高度：656px；
}
.集装箱{
保证金：0自动；
宽度：477px；
高度：656px；
背景色：#232529；
颜色：9bbe0a；
}
.content{填充：250px 0 0 45px；}
.footer{位置：绝对；左侧：22px；底部：2px；}
.footer、.footer a、.footer a:链接、.footer a:已访问、.footer a:悬停、.footer a:活动{color:#9bbe0a；}
东西

景观
肖像
document.write(
'\r\rw.orientation:'+window.orientation+
'\r屏幕：'+screen.width+'x'+screen.height+
'\rbody.client:'+document.body.clientWidth+'x'+document.body.clientHeight+
'\rw.outer:'+window.outerWidth+'x'+window.outerwight+
'\rw.inner:'+window.innerWidth+'x'+window.innerHeight+
'\rdocEl.client:'+document.documentElement.clientWidth+'x'+document.documentElement.clientHeight
);
|
所以我对此感到厌倦，于是写了一篇javascript黑客文章。这是可能的，因为我有一个固定的宽度，以及布局。不是我喜欢的解决方案，但他妈的是的。。。（我在这里买的ipad上的opera mini无法使用，因为它无法提供任何可用尺寸…-我可以测试safari、dolphin和operamini）

为了安全起见，您应该：

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

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

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

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

html { width:100%; }