Search code examples
google-maps-api-3responsive-designviewportframeset

Why is viewport different on mobile phone than in responsive design mode?


I have an issue where a web page I have build using the Google Maps API, which shows me a correct viewport when viewing the page in Responsive Design Mode (same in FirefoxDeveloperEdition, Chrome and Safari), e.g. ~320x568 for an iPhone 5s. However, when I actually view the page on an iPhone 5 I get a viewport of 980x1461, which makes the page impossible to view on a phone.

I'm using window.innerWidth and ditto height to access the viewport and get it printed on the web page (source of the numbers above).

Any hints on what could be going wrong?


Solution

  • Do you have viewport meta tag in the head of your page? eg

    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    ...
    </head>
    <body>
    ...
    </body>
    </html>
    

    More info about this meta tag: https://developers.google.com/speed/docs/insights/ConfigureViewport

    Good luck!