[GitHub] [cordova-android] epieddy edited a comment on issue #870: unable to display in native resolution on Android

[GitBox <gi...@apache.org>]

epieddy edited a comment on issue #870: unable to display in native resolution on Android
URL: https://github.com/apache/cordova-android/issues/870#issuecomment-607327474
 
 
   > 
   > 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](https://developer.android.com/reference/android/webkit/WebSettings.html#setUseWideViewPort(boolean))
   > [setLoadWithOverviewMode](https://developer.android.com/reference/android/webkit/WebSettings.html#setLoadWithOverviewMode(boolean))
   > 
   > 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 :
   
   ```java
   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 :
   
   ```javascript
         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

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@cordova.apache.org
For additional commands, e-mail: commits-help@cordova.apache.org