<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?
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.