Menu
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?
792
Disable Magnification Gesture Select “Accessibility“. Choose “Vision“. Scroll down and select “Magnification gestures“. Set the slider at the upper-right part of the screen to “Off“.
By default, Chrome sets the zoom level to 100%. To manually adjust the settings, use the Ctrl key and “+” or “-” combos to increase or decrease the page magnification. If you are using a mouse, you can hold down the keyboard Ctrl key and use the mouse wheel to zoom in or out.
A recommended approach is to use “resolution switching,” with which it is possible to instruct the browser to select and use an appropriate size image file depending on the screen size of a device. Switching the image according to the resolution is accomplished by using two attributes: srcset and sizes.
Why do you have that meta tag at all? If you remove it completely, the device will decide on the zoom level automatically.
80
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.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
