THCoder THCoder - 1 month ago 13
iOS Question

viewport properties how to use properly

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">


Due to the fact that
user-scalable=no
means we do not let the user zoom in or out of the page. Then why do we need to use
initial-scale=1.0
and
maximum-scale=1.0
? Is it necessary to use them?

Answer

Your intuition is correct, maximum-scale=1.0 is unneeded since the page can't be zoomed anyway. Setting minimum-scale=1.0, maximum-scale=1.0 is a common pattern that's almost equivalent to user-scalable=no. Almost because some browsers will load the page at a scale such that all content width is visible (e.g. Chrome on Android does this) so the user may start off at a scale that's not 1.0 and can't zoom. However, adding initial-scale=1.0 forces the zoom to 1.0.

Comments