unable to display in native resolution

[onelsonic]

On android it is impossible to display the cordova webview in native full resolution.

the webview is currently always using CSS Units so the rendering of the webview is divided by the pixel density of the devise, rendering the view in a very low resolution.
Scaling the view is not fixing this issues, neither forcing the user-agent to the "desktop-view" value.

We should have a way to force Cordova to render in "Desktop-View" in cordova Android or in native resolution.

#apache/cordova-lib#718

others experiencing the same issue:
@tscislo @brodybits @rokobuljan @getDOKI @basvanmeurs @jameelio @geniusq1981

Case is：
making a web app on android TV with cordova.
The TV device resolution is 1920x1080.
but when I run the app , the window.innerwidth/innerheight is 960x540 though it is fullscreen also.
While the html page is designed with 1920*1080 , so it was shown partly.
I find nothing useful about this from the cordova offical guideline.

[victorzzt]

My current workaround:

• In index.html: <meta name="viewport" content="user-scalable=no, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, width=device-width, viewport-fit=cover">
• In index.css the "body" part, add: transform-origin: 0px 0px; transform: scale(0.5);

window.innerHeight and window.innerWidth has the native resolution.
But haven't run test if one pixel is one pixel. Also I don't have enough device to test if it works across different device and different version of android.

[pndalal]

I have a web game that I'm trying to port to mobile using Cordova. This issue is causing my game to render at a lower resolution, and no workarounds thus far posted can fix the problem.

The workaround used by @victorzzt does seem to work for rendering the display at the correct resolution, but the touch points are off, which in the case of my game, makes it unplayable.

I hope we can have a fix for this soon!

[ags70]

It doesnt seem that there will be a solution soon :(
Woud an elder version of cordova solve that problem?

[breautek]

Woud an elder version of cordova solve that problem?

Older versions of cordova-android aren't supported mainly because they don't support the minimum required API target 28 enforced by Google.

https://developer.chrome.com/multidevice/webview/pixelperfect may help find a temporary workaround.

It makes references to use the native APIs:
setUseWideViewPort
setLoadWithOverviewMode

I'm pretty sure cordova-android already uses setUseWideViewPort, as I think that needs to be enabled for the webview to acknowledge the viewport meta tag.

I'm also wondering if this would be more appropriate as a third-party plugin instead of a core feature...

[epieddy]

Older versions of cordova-android aren't supported mainly because they don't support the minimum required API target 28 enforced by Google.

https://developer.chrome.com/multidevice/webview/pixelperfect may help find a temporary workaround.

It makes references to use the native APIs:
setUseWideViewPort
setLoadWithOverviewMode

I'm pretty sure cordova-android already uses setUseWideViewPort, as I think that needs to be enabled for the webview to acknowledge the viewport meta tag.

I'm also wondering if this would be more appropriate as a third-party plugin instead of a core feature...

cordova-android does not use setUseWideViewPort(). (version 8.* at least)

That is why you have the https://www.npmjs.com/package/cordova-plugin-viewport which does exactly what you said :

public class MainActivity extends CordovaActivity
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);

        // enable Cordova apps to be started in the background
        Bundle extras = getIntent().getExtras();
        if (extras != null && extras.getBoolean("cdvStartInBackground", false)) {
            moveTaskToBack(true);
        }

        // Set by <content src="index.html" /> in config.xml
        loadUrl(launchUrl);

        // THIS PART IS MODIFIED BY THE PLUGIN
        WebView webView = (WebView) appView.getView();
        webView.getSettings().setLoadWithOverviewMode(true);
        webView.getSettings().setUseWideViewPort(true);
    }
}

Once you've done that. You can use the meta viewport with some javascript to use the native resolution :

      let metaViewportElement = document.querySelector('meta[name="viewport"]');
      if (metaViewportElement === null) {
        metaViewportElement = document.createElement('meta');
        metaViewportElement.setAttribute('name', 'viewport');
        document.querySelector('head').appendChild(metaViewportElement);
      }

      const metaViewPortContent = `user-scalable=no, width=device-width, initial-scale=${1 / devicePixelRatio}, maximum-scale=1`;
      metaViewportElement.setAttribute('content', metaViewPortContent);

PS : the cordova-plugin-viewport is bugged. You need to modify it's plugin.xml to move the hook after_prepare outside of the platform cordova section BEFORE running cordova prepare.

If it doesn't work, try deleting the plugins and platforms folders and rerun cordova prepare

[ags70]

Thanks a lot for your hints! My first android-app (html,css,js,ajax,sse) already runs with cordova, due to the diplayed resolution (In mobile browser it fits perfect as a website).

I downloaded viewport as a zip, copied all data into project folder, modified MainActivity,java by editor and built cordova without failures. Next I will implement your javascript into my application and build again.

• Do you agree?

• I´m not sure what "move the hook.." means. Could I leave it as it is (I´m building android) and if not where to move? inbetween the same file, just outside ?

• What means "cordova prepare"? Isn´t it part of the build process "$ cordova build"?

[ags70]

WOW! 👍 :o)

[epieddy]

Thanks a lot for your hints! My first android-app (html,css,js,ajax,sse) already runs with cordova, due to the diplayed resolution (In mobile browser it fits perfect as a website).

I downloaded viewport as a zip, copied all data into project folder, modified MainActivity,java by editor and built cordova without failures. Next I will implement your javascript into my application and build again.

• Do you agree?

If you modify MainActivity,java yourself by hand, you can completely skip cordova-plugin-view => the only goal of the plugin is to modify the source code of MainActivity,java when you run cordova prepare. It does nothing else.

The plugin does this by using the hooks after_prepare to execute a custom script after every cordova prepare command which override the MainActivity.java file.

• I´m not sure what "move the hook.." means. Could I leave it as it is (I´m building android) and if not where to move? inbetween the same file, just outside ?

Every cordova plugins comes with a plugin.xml file at its root. It describes stuff about the plugins.
The plugin.xml file of viewport is broken :

<?xml version='1.0' encoding='utf-8'?>
<plugin id="cordova-plugin-viewport" version="1.0.4" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
  <name>Viewport</name>
  <engines>
    <engine name="cordova" version=">=6.0.0" />
    <engine name="cordova-android" version=">=5.0.0" />
  </engines>
  <platform name="android">
    <hook type="after_prepare" src="set-viewport.js" /> <!-- Not supposed to be inside <platform name="android"/> -->
  </platform>
</plugin>

• What means "cordova prepare"? Isn´t it part of the build process "$ cordova build"?

cordova build = cordova prepare + cordova compile
cordova run = cordova build + launch app
cordova run --nobuild = just launch app

If you modify MainActivity.java by hand, you will likely loose you modifications every time you run cordova prepare (or any "higher" command).

The content of plugins/ and platforms/ is entirely managed by cordova and we are not supposed to touch it. Cordova will likely override the content of platforms/ and your hand made MainActivity.java at some point.

[xcarcelle]

Dear @epieddy , @ags70

thanks for android cordova project which help building android app from web frontent.

We have tried to fit the resolution of the frontend (reactjs) to the tablet resolution (1280x800) however even using your method ("cordova-plugin-viewport") in this issue, it doest not fit the tablet resolution.

We are using :

• cordova 9.0.0
• android API28 (Android 9.0)
• Lenovo Tablet M8 HD with a 8.0" HD (1280 x 800) touchscreen

Do you have any ideas/tests we can run in cordova to fit/force the resolution from the frontend to fit the hardware resolution ?

Best. Xavier.

[epieddy]

• Did you confirm that the MainActivity.java was correctly updated by the plugin inside the /platforms/android directory ?
• Did you setup the correct meta viewport tag ?
• Did you rebuild and redeploy ?

Unfortunately, it's a tiny bit more complicated than simply adding the plugin right now.

[breautek]

Closing as stale.