I have a basic HTML page with a header that is fixed. When I pinch-zoom in to the page on an iPad or iPhone the header flows off the edge of the page and I can not drag the page to see it all.
I can prevent the whole page from being zoomable, but I would like just this fixed header to not zoom and the rest of the page to be zoomed as normal.
Is there any way to do this?
EDIT:
Here's my CSS/HTML
body {
margin:0;
padding:0;
}
.nozoom {
width:100%;
position:fixed;
top:0px;
margin:0 auto;
}
.nozoom > div {
width:1008px;
margin:0 auto;
background-color:#444;
height:100px;
}
.yeszoom {
width:1008px;
margin:100px auto 0;
background-color:#096;
}
and...
<div class="nozoom"><div>This must not zoom and if you look carefully you'll see that you can never see the content of this which is completely over to the left - one two three four five six seven eight nine ten eleven twelve thirteen... dfgkjhdfsklhj dsfkjghl sdflghsdfklg sdfklg dsfkgh skdlfgh ksdlf ghskdlfgh jklsdfhg jklsdfg hsdfghj sdflkg hlsdf sdfg kljsdf jksdf sdfkjg sdfg ksdjfl gjkldsfg klsdfhgljksdf gsd kjlsdfh glskjdfhg jsdf hsdflk gsdf</div></div>
<div class="yeszoom">
<p>sdfgdsfgdsfgdfsga gsdf gsdf </p>
<p>fhgdfgh dffhgdfghdfgh dfg......</p>
<!-- Loads more content here-->
</div>