CODEWITHSUNDEEP
htmlcsscordovamobile
Elia Schenker
Elia Schenker

Reputation: 812

Make Cordova display it's content like a mobile browser woud

we have been developping a mobile application using HTML/CSS/Js. Because this was developped mostly in the Device Toolbar of chrome, it does not look good when not used in a mobile browser. Unfortunately, when I build the Project to an Android APK using Cordova it does not look like it would on a mobile browser (Firefox, Samsung Internet, etc.) First Image was taken in firefox, the second in the Cordova Application. enter image description here

enter image description here

Is there any way to make Cordova behave like a Mobile Browser would? If it isn't possible to make Cordova behave like a Mobile Browser can you emulate this using css or javascript? I have heard about and tried the zoom css tag, which in my case helped on a handful of pages, though a few other pages, which work perfectly on the Mobile Browser, didn't look good at all using zoom.

Upvotes: 1

Views: 372

Answers (1)

Norman Breau
Norman Breau

Reputation: 2417

This answer assumes you've tried the <meta name="viewport" content="width=device-width, initial-scale=1"> meta tag as suggested in a comment.

Cordova uses the systems' webview. It does not have it's own webview implementation. Therefore Cordova is already using a "mobile browser" engine. But the mobile engine being used might not be of the same version as the installable browser version.

As long as you're using Android 4.4+, the system webview is a chrome-based webview and as of Android 5.0, the webview is upgradable by the use through Google Play updates. It's worth mentioning that the latest cordova versions only support Android 5.1+.

When you setup a new emulator, it will have the factory versions installed by default, which can sometimes be a really old version of the webview. If you installed a Google Play enabled emulator (the emulator image is marked as a Google Play image), you can sign into Google Play and update the device which will include the system webview updates. Older devices may still have the webview version limited. For example, I believe android 5 can only get up to System webview Chrome 70 if I recall correctly.

Using a google play enabled emulator and updating the emulator device via Google Play may fix your issue, but it also suggests that your HTML/CSS document isn't backwards compatible to older webviews versions. Perhaps your document is using CSS features that only exists in newer webview versions.

Upvotes: 1

Related Questions