The main problem is that if the user clicks outside of the zoom box, the zoom will be locked and they will not be able to zoom in or out.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
The viewport is the user’s visible area of a web page. It varies with the device, and will be smaller on a mobile phone than on a computer screen.
The width=device-width part sets the width of the viewport to follow the width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
The maximum-scale=1.0 part sets how much the user is allowed to zoom in on the page. A value of 1.0 means that no zooming is allowed.
The user-scalable=no part disables any zooming that might be available by default on some devices (such as double-tapping to zoom in).
How to Disable Zoom on a Mobile Web Page
To disable zoom on a mobile web page in HTML, use the following code:
This will make the page fit the width of the device it is being viewed on.
To zoom off in HTML, use the zoom property. For example:
Turn off HTML Scaling
HTML scaling is a feature of HTML that allows web browsers to enlarge or reduce the size of text and images to make them more readable on smaller or larger screens. This feature can be turned off in most browsers by setting the html-scaling property to “none”.