I'm currently working on a site for a client (still a work in progress) and trying to fix some of the mobile issues on the site.
The main issue I'm having is that mobile browsers (android + iphone) load the site completely zoomed-in on the top left portion of the site. I'd like it to be zoomed out to fit the whole site width in the viewport, no matter the width of the viewport.
The site can be viewed here: http://www.graceprep.com
Is there an easy fix for this? I'm experienced with HTML / CSS but I'm a bit of a newbie when it comes to mobile browsers.
Here is some HTML in my header.php file that might be relevant. I tried changing the width property to no avail. The initial-scale property is effective, but too broad - I'd like the site to be completely zoomed-out for all mobile browsers, no matter the orientation or screen-size.
Is there a way to do this?
Why do you have that meta tag at all? If you remove it completely, the device will decide on the zoom level automatically.
I'm almost positive that
<meta name="viewport" content="width=device-width, initial-scale=1">
should solve that issue. You can set "width" to whatever value you want, but by settin it to device-width it will adjust to any device's pixel width value. "initial-scale" controls the zoom level at that specified width.
It seems that most mobile browsers tend to communicate a default viewport width which is considerably wider than the width of the mobile. For example iOS Safari assumes a webpage is 980px wide, and zooms out in order to fit the whole lot within the available iPhone 4 320px(https://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972). Android browsers tend to adapt for a width between 800 to 1024 CSS pixels (https://developers.google.com/speed/docs/insights/ConfigureViewport).
The expected width seems to somehow be communicated before the meta tag is implemented, and so in some situations setting the width to the width of the device then seems to be treated as zooming in.
Unless the css on your page uses media queries to adapt for the actual width of the device, it is better in my opinion to avoid missing out the 'width=device-width' part of the value, and just setting the other constraints that you're after.
