Today I learned how to properly use the viewport meta tag to render websites correctly on mobile devices. It’s probably been about a year now, that www.noformatpodcast.com would not zoom when rotated to fill the screen. The scale would stay exactly the same and since the site was designed to be a static 320 px wide a large blank space would appear to the right. I decided today was the day. No matter what cost, today I would fix this ugly, ugly bug. Since I had already put hours into trying to figure out what was causing the problem many many months ago, I decided to make a copy of the website and just go to town on it. I threw out stylesheets, entire sections of the website, added an HTML reset but nothing I did could make the site zoom to fill when rotated. So then I decided to make an experimental (super basic) site from scratch and build it up and see if I could make any site scale properly. This was helpful and I eventually figured it out. In hindsight the solution was very simple. I learned about the viewport meta tag around the time that I initially made the website but really what I did was just copy some code from the internet not knowing exactly what each part meant. This is how I had the meta tag in the head:
<meta name="viewport" content="width=device-width, initial-scale=1">
This is what I changed it to:
<meta name="viewport" content="width=device-width">
By removing the
initial-scale=1 you are allowing the device to properly scale the website to fill the screen in any orientation or screen size. Thanks goes out to Apple’s iOS developer Library. I guess it pays to read the manual : /
As a side note if I were to remove the
content="width=device-width" statement as well (which in effect is like removing the entire meta tag), the page would be rendered as though the display were much larger (in the case of an iPhone, 980 px) so my mobile site would turn out tiny and to the left.