The user-scalable="no" parameter for the <meta name="viewport"> element is used to prevent users from zooming in or out on a web page using the pinch-to-zoom gesture on their mobile devices. However, this can be problematic for users who may have difficulty reading small text on the page without the ability to zoom in.
Bad
<meta
name="viewport"
content="width=device-width, user-scalable=no">Limiting the amount that users can zoom by using the maximum-scale parameter can create challenges for individuals with low vision who require browser zoom to access the contents of a web page.
Bad
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0">Good
<meta
name="viewport"
content="width=device-width, initial-scale=1.0">The initial-scale attribute in the <meta name="viewport"> tag sets the initial zoom level when a web page is first loaded on a mobile device. This attribute determines the scale at which the web page is displayed and how much of the page can be seen on the screen at once.
For example, if the initial-scale is set to 1, the web page will be displayed at the device's default zoom level, which is typically around 100% of the page's actual size. However, if the initial-scale is set to 0.5, the web page will be initially displayed at a reduced size, showing only 50% of the page's actual size, and the user will need to zoom in to see the content more clearly.