Position:Fixed messing up UI while loading in mobile

Question

I am building one single website for both mobile and desktop.I am using the Fixed position for the header to satisfy the navigation requirement(like scroll spy).It is working fine in desktop version.When i try to browse the same in mobile version,since i made the min-width:850px; the content is not showing up properly in the mobile.Because of the fixed position i cannot able to drag to the header also.

I have found that http://www.visualstudio.com/en-us/downloads this MS website follow the same, when i minimize the website i am having the same problem.But when i load that page in mobile , the webpage loads in complete zom out mode,but mine zoom in and fits the page to the mobile browser.I wounder there must be some trick to make the page zoom out completely, so that while loading in the mobile it wont break.

If anyone have any idea, pls share. I have made a simple fidle to demonstrate my problem. http://jsfiddle.net/rg46D/6/

   <div style="position: fixed; height: 70px; background-color: lightcoral;width:100%;min-width:950px">

P.S: i cant change the minimum width of the page.

Answer 1

Nice learning for me.I found the problem by myself.If you are not following the responsive design and having some of fixed width , never use this tag.

<meta name="viewport" content="width=device-width" />

I have removed it , it is working just like desktop in mobile..

Answer 2

Try removing the min-width and place some padding on the navigation container instead:

<div class="header" style="position: fixed; background-color: lightcoral;width:100%;">
        <a href="#Home" style="padding-left:60px">Home</a>
        <a href="#Links" style="padding-left:60px">Links</a>
        <a href="#about" style="padding-left:60px">About</a>
        <a href="#Home" style="padding-left:60px">Link1</a>
        <a href="#Links" style="padding-left:60px">Link2</a>
        <a href="#about" style="padding-left:60px">LInk3</a>
    </div>

Then the CSS:

.header {
    padding-bottom: 20px;
}

http://jsfiddle.net/rg46D/7/