At the moment I'm making adaptive web page and faced with the following problem. If you open this page exactly in mobile device browser, you could see that it appears immediately with zoom-in effect. And you need to zoom it out manually, despite the fact it has the following viewport:
<meta name='viewport' content='width=device-width, initial-scale=1.0'/>
But if set this viewport:
<meta name='viewport' content='width=device-width, maximum-scale=1.0'/>
and open it then we'll get an effect we need exactly (the page without zoom).
Could anyone explain me why it happens (illogical behavior of viewport's values)?
Thanks in advance!
Essentially your problem will be that "width=device-width" is telling the browser that your design will work at that browser's css width. This can go down as low as 320px on a phone. However, your design does not shrink responsively anywhere near this small - it only goes down to 732px.
As such, when you set the initial scale to 1, you will only see the first 320 pixels on screen.
I believe if you simply do not define a viewport then it will work as you wish it to - to start at a zoom which shows all the content is the default behaviour on most devices. This is why width=device-width, maximum-scale=1.0 will be working (no start zoom is set, so it will use the default). However, maximum-scale will limit how far a user can then zoom.
(This seems a good overview)