Viewport meta tag not working as expected on Android

Question

I've made a responsive website and have used the viewport meta tag to fix the scaling on different devices. I've also used JavaScript to tell the devices not to scale below 525px, as this is the min-width of my body element:

<meta id="myViewport" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />

window.onload = function () {
    if(window.innerWidth <= 525) {
        var mvp = document.getElementById('myViewport');
        mvp.setAttribute('content','width=525');
    }
}

This works perfectly on nearly all devices I've tested it on; specifically it works perfectly on iOS mobile devices (iPhones/iPads). The website is perfectly scaled, everything fits within the screen, and there is no need for the user to scroll horizontally, zoom in or zoom out.

However, when viewing the website on an Android device, it does not fit the screen as expected. To ensure all content fits the screen the user has to zoom out slightly. This is inferring that the viewport is not working correctly on Android devices. Any ideas why?

I basically want the website to load on each device and perfectly fit within the screen, so the user does not need to zoom out for the content to fit.

The link to the website is: www.wyevalleycampers.com/Version2/

Answer 1

When the page content is wider than the device viewport, Chrome will load the page fully zoomed out so that all the content is visible.

You've over-constrained the browser in your case. If the window.innerWidth <= 525, the user's device has a viewport that's smaller than 525px wide. You then tell the browser to render into a layout that's 525px wide. Since you've set the minimum and initial scale to 1, the browser can't zoom out to show all the content. It needs to zoom out since at scale=1 the viewport is smaller than your content width. Removing the initial and minimum scales should help.

Apple recently stopped respecting the user-scalable attribute of the viewport meta tag, I'd guess they might not respect minimum-scale for the same reason.