0 
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <meta name="apple-mobile-web-app-status-bar-style" content="default" />

I have got the tags above on my page. What I struggle to achieve is to put the viewport below the black status bar that iphone has got. I read this:

If content is set to default, the status bar appears normal. If set to black, the status bar has a black background. If set to black-translucent, the status bar is black and translucent. If set to default or black, the web content is displayed below the status bar. If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar.

But I did follow the guidelines, and still dont understand..why there is an overlap between the status bar and the viewport.. I want the viewport to go below the iphone status bar.. how to achieve so?

This solution doesnt also work:

  function fullScreen() {
       window.moveTo(0, 1);
      window.resizeTo(screen.width, screen.height);
    }

An alternative solution could be to resize the document by 5px (shrink it) and give
at the beginning of the body. But does anyone knows how to do it?

4

1 回答 1

0

这是一个混乱的解决方案，但您可以将上边距设置为状态栏的大小。

于 2012-07-15T13:07:28.827 回答