Hi, when my app runs on my Android device (Pixel 3 XL), the screen resolution is shown as width = 412px, height=749px. However, the Pixel 3 XL is 1440 x 2960 pixels with around ~523 ppi. So everything appears larger than it should in a typical web view.
When I access my page from the Android Chrome browser, it’s shown as width = 980px, height = 1782px.
Does Cordova bump up the resolution or something? I’ve not even tested it on any iOS device yet, so I’m curious what’s causing this behavior, and what should I do about it?
How do I work with this in that case?
With consultation from the Meteor Slack channel, I included this bit of code in my index.html in the tag:
content="width=device-width, height=device-height, viewport-fit=cover, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
This helps to ensure that the scale is 412 x 749 as well, just like the native mobile version. This article helped clarify my misconception regarding the disparity in pixel density: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag.
Cordova appears to include this meta tag somewhere in its build process by default.