如何获取方向：具有固定高度的元视口的肖像模式 [英] how to get orientation:portrait mode with meta viewport with a fixed height

查看：100
本文介绍了如何获取方向：具有固定高度的元视口的肖像模式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我第一次拥有stackoverflow问题的时间，因为这件事现在让我疯狂了一整天。我今天借了一个ipad来测试一个网站，这个网站还带有额外的手机和平板电脑版本。 （它只有safari）布局是一个静态的东西与一些图形，他们希望它1：1。
所以我学习了移动设备，增加了一个 

 < meta name =viewportcontent =width = x/>

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



我得到的平板电脑设计是垂直的。它在这种情况下有477x656像素。因此它应该适合高度，并且可以在每个平板电脑上显示出好看，以纵向模式覆盖整个显示屏，以横向模式横向居中。所以我想我只是把a 

 < meta name =viewportcontent =height = 656/>

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



css基本上是：

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

并且结果是完全失败：


  • 在横向模式下，页面呈现的垂直尺寸大于浏览器中的可用空间。 （在这里忽略高度）
    • 在肖像模式下
  • 大量的宽度被添加到html标签中，因此body标签只能看到一半。



将宽度添加到视口只会让浏览器忽略高度，并且会像手机版本中那样运行。



所以我想，我强制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-width？
  • 以及如何获取以横向模式显示的整个页面？为什么它更大？



任何提示高度赞赏！ （我现在确实有点疲惫了......事实证明，我不再使用软件，没有做到我期望的）



呃，这是我的test-szenario乱搞： 

 <！DOCTYPE html> 
< html> 
< head> 
< meta name =viewportcontent =height = 656/> 
< style> 
 html {background-color：＃8b8b8b; } 
 html {width：477px！important; } 
 
 @media（orientation：landscape）{
 html {margin：0 auto;背景色：＃e1006e; } 
 #p {display：none; } 
 @media（orientation：portrait）{
 html {background-color：＃8f9d6a; } 
 #l {display：none; } 
} 
 
 body {
 position：relative; 
背景颜色：＃000; 
 margin：0 auto; 
 padding：0; 
 width：477px; 
 height：656px; 
} 
 .container {
 margin：0 auto; 
 width：477px; 
 height：656px; 
背景颜色：＃232529; 
颜色：＃9bbe0a; 
} 
 .content {padding：250px 0 0 45px; } 
 
 .footer {position：absolute;左：的22px;底部：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>东西< / p> 
< div id =l>< b>横向< / b>< / div> 
< div id =p>< b>纵向< / 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> 
  
 
解决方案
所以我对此感到厌倦，并写了一个javascript-hack，很有可能，因为我有不是我的解决方案类型，但是地狱是啊...（并且它不能在ipad上的opera-mini上使用，因为它没有提供任何可用的尺寸......  - 我可以测试safari，海豚和operamini）
 
 
  document.body.style.marginLeft = Math.floor（（window.innerWidth  -  477） / 2）+'px'; 
  
为了安全起见，您应该css：
  html {width：100％;} 
  
我仍然对真正的解决方案感兴趣（或者有人告诉我，我在理解视口方面是错误的......或者确认这是一个浏览器）
 
time for my first own stackoverflowquestion, since this thing is driving me crazy the whole day now. i borrowed an ipad today to test a website wich comes with additional phone and an tablet-versions. (there's only safari on it) the layout is a comlete static thing with some graphics and they want it 1:1.
so i learnd about mobile devices, added a 
<meta name="viewport" content="width=x" />

and got a perfect version for the phone. but when it comes to the tablet i ran into trouble.



the tablet design i got is a vertical one. it has in this case 477x656 pixels. so it should fit in height and could show nice in every tablet, covering the whole display in portrait mode, beeing horizontally centered in landscape mode.



so i thought i just put a 
<meta name="viewport" content="height=656" />

in the code and the browser renders the thing just as is does on the mobile version, just with our height as viewport-master instead of the width.
this would be a perfect universial solution, solving the customers demands just as the phone version does.
(well, of course the difference is, that you would scroll up and down in the phone version, while the tablet version would have some empty space left and right, especially in landscape-mode.)



the css basicly is:
body {
    margin:0 auto;
    width:477px;
    height:656px;
}

and the result is a total failure:



    

  • in landscape mode the page is rendered vertically larger than the available space in the browser. (seems like height is ignored here)
    • 

  • in portrait mode n massive amount of width is added to the html tag so that the body tag can only be seen half.
    • 




adding my width to the viewport just makes the browser ignore the height and behave like it should in a phone-version.



so i thought, i force html-width
html { max-width:477px !important; }

or so, but didn't help.
so i thought, okay, forget it and workaround the portrait version using
html { margin:0 auto; }
@media (orientation:portrait) { html { margin:0; }}

and so, after a lot of desperation, i found out that: adding a viewport-meta height=x forces the page to be landscape mode



this is basically (i guess) due to safari calculating the viewport-width according to the given height and the screen proportions (in landscape mode), instead of the given html. resulting in landscape proportions even in portrait mode... weird enough. and yeah - its not what you expect, looks like a browserbug to me. or am i totally wrong here, misunderstanding the whole viewport-thing?



so



    

  • how do i force the browser to get it right? to calculate the html-width according to my html/css based on my given height?
    • 

  • and how do i get the full page shown in landscape mode? why the heck is it larger?
    • 




any hints highly appreciated! (i'm indeed kinda physically exhausted now... turns out, that i'm not used anymore to software not doing what i expect)



uhm, so here's my test-szenario to mess around with:
<!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>



 解决方案 
so i was getting tired of this and wrote a javascript-hack. wich is possible, since i have a fixed width on that layout as well. not my type of solution, but hell yeah... (and it is not working in the opera-mini on the ipad i got here since it doesnt deliver any usable dimensions... - i could test safari, dolphin and operamini)
document.body.style.marginLeft = Math.floor((window.innerWidth - 477) / 2) + 'px';

to be on the safe side you should css:
html { width:100%; }

i'm still interested in a real solution. (or someone telling me, that i am wrong in understanding the viewport. ...or confirming, that is a browserbug)


                        
这篇关于如何获取方向：具有固定高度的元视口的肖像模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆