how to get orientation:portrait mode with meta vie

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?

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)