1

I have a little problem with showing a fixed header with I-Phone. The header must be placed in the middle (like now). The Problem is, that I can not zoom in with I-Phone. 

#header{
    position:fixed;
    z-index: 1;
    width: 100%; 
    top:0;
    width:100%; 
    height:100px;
    padding-top:20px;
    background:#fff;

}
#inheader{
    width:825px;
    margin:auto;
}
#headerlogo{
    float:left;
}
#navmenu{
    float:right;
}

Here is the html:

   <div id="header">
            <div id="inheader">
            <div id="headerlogo">
                <a href="/home.php" title="home" rel="home"><img src="/images/logo.png" alt="Logo" width="295px"></a>
            </div>
        <div id="navmenu">
            <!-- horizontal nav-menu-->
            </div>
        </div>

Had anybody the same problem yet? Any help?

Greets, yab86

yab86
  • 395
  • 6
  • 24

1 Answers1

1

You need to make your site aware of the device and browser viewport capabilities: try:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

in your HTML header.

Kinnectus
  • 899
  • 6
  • 14
  • Thank you Big Chris. The problem now is, that the whole site is very big and on I-Phone it shows not the page on one screen. I have to scroll horicontal quite a lot – yab86 Jun 14 '14 at 10:24
  • Play around with the viewport settings for your site. Try: http://stackoverflow.com/questions/1230019/how-to-set-viewport-meta-for-iphone-that-handles-rotation-properly – Kinnectus Jun 14 '14 at 10:44
  • Thanks for the link. But, nothing happend. I made now a workaround with "@media only screen and..." and set the position on absolute. It is not what I wanted, but I do not have a better solution. It seems to, that position:fixed elements and smartphones are not best friends. – yab86 Jun 14 '14 at 10:57