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