Does the Viewport meta tag affect Chrome and Safari differently, and if so how to compensate for this?

Question

Problem Description:

I am designing a mobile navigation system for a production website, and would like to use CSS media queries to adjust the scale of the mobile navigation layout depending on the device-width. To do this I need to introduce the viewport meta tag configured as shown below.

<meta name="viewport" content="width=device-width">

Unfortunately after adding this meta tag, Safari (and Firefox) renders only a portion of the content in the visual viewport, while Chrome shows the entirety of the content within the visual viewport, which is the desired and my expected outcome.

IOS Safari Mobile Screenshot

Android Chrome Screenshot

Question:

Why are the browsers responding differently to the meta tag? And, most importantly, what is currently the most correct solution to configure Safari and Chrome to render all content within the visual viewport regardless of device-width? Is this possible without forcing the rendered content to responsively adjust to the size of the visual viewport through CSS?

Additional Info:

The reason I desire this solution, is because the layout size of the website is not optimized to scale below 880px (not my design). And, I believe it will take considerable time to redesign the static nature of all pages to be responsive. So I desire a temporary solution, so that the website is temporarily more usable on mobile devices, until I can reach the ideal solution.

Currently, when the viewport meta tag is not present, mobile browsers seem to automatically adjust the viewport, such that the entire content is visible. So my current solution, until I find a better one, is to use JavaScript to detect the browser agent, and if chrome then apply the meta tag using JS, and if not then do not apply the meta tag, so that the content renders correctly in Safari (and Firefox). Unfortunately this means that the Navigation layout size is the same on both IPad and IPhone. Not Ideal.

Attempted Solutions:

I've already attempted adjusting the content attribute of the meta tag to also set the initial-scale as shown below.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

IOS Safari Mobile Screenshot 2

Android Chrome Screenshot 2

As you can see in the screenshot though, this further enhances the issue as the visual viewport size is further reduced. So naturally I also tried to decrease the initial-scale value to increase the size of the viewport as shown below.

<meta name="viewport" content="width=device-width, initial-scale=0.335">

IOS Safari Mobile Screenshot 3

Android Chrome Screenshot 3

This does have the desired effect of displaying the entire content within the visual viewport. However, it also triggers the CSS media queries to determine the width to be larger than 600px regardless of the device width. Therefore the purpose of the meta tag is nullified in my case.

Answer 1

If I understand correctly, you want mobile browsers to scale your design so that all the content fits, but still detect that you're on a small screen, so that you can switch to a different menu design.

For a temporary solution, you can:

• omit the viewport meta
• look into the device-width media query, which matches device pixels rather than CSS pixels in Safari / Chrome.

Be aware that this media query is deprecated, and Firefox reports CSS pixels. I can't think of a solution for handling Firefox at the moment, but I hope this helps!