Check out this link for the test:
The current layout of the site is exactly how I want it to be presented. However, I am facing an issue where if I set the viewport meta tag to
<meta name="viewport" content="width=device-width, initial-scale=1">
it causes zooming on mobile devices.
I have also tried setting it to
<meta name="viewport" content="width=device-width, initial-scale=0">
but this affects the layout and causes some elements to be positioned incorrectly.
So, I am looking for a solution to prevent zooming by default on mobile devices. I am open to using Javascript/jQuery if the meta tag alone cannot solve the issue.
Thank you.
Update:
Thank you for the responses so far.
Even with no scrolling, setting max scale = 1, min scale = 1, the initial width is still the zoomed version and cannot be scaled down.
To clarify, I am looking for a way to have the initial width match the width of the device so that it is not zoomed in by default.
Alternatively, I may need to zoom to the smallest scale.