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.