I am trying to understand what's causing a strange zoom issue on the iPhone:

my webpages (e.g. this page link), automatically load to a zoomed-in view when viewed on the iPhone, in both vertical and horizontal view.

While I am able to pinch/scale down the site to full page height in vertical view, the same is not possible in horizontal view.

I have played with all variations of viewport meta tags, none of them worked.

And I have adjusted the CCS as follows:

@media only screen and (min-width: 240px) and (max-width: 320px)

& html body set to height:100%, but none of it seems to do the trick.

I am relatively new to HTML and CSS, so not quite sure what am I missing?

iphone