The WebView is providing incorrect window.innerHeight measurement

Question

The WebView is providing incorrect window.innerHeight measurement

Having an issue with my Android app that uses WebView and JavaScript. In the onPageFinished() method of my WebViewClient, I trigger a JavaScript initializing function. However, when I try to access window.innerWidth in the JavaScript method, it always returns incorrect values (320 x 240) regardless of orientation. This is strange because elsewhere in the script, window.innerWidth and window.innerHeight give accurate numbers.

What's more confusing is that if I directly check the height and width of the WebView in onPageFinished(), using view.getHeight() and view.getWidth(), it gives me the correct values. This indicates that everything has loaded properly in WebView.

Any insights on what might be causing this discrepancy?

Appreciate any help!

javascript android android-webview

Answer 1

Answer №1

The reason for this behavior is that JavaScript runs before the WebView's view-related setup takes place. This results in Android WebView providing a default value of 320x240 to JS. It is advisable to delay the execution of your JS code, like so:

function execute() {
    int height = view.getHeight();
    int width = view.getWidth();
};
window.setTimeout(execute, 300);

Answer 2

The reason for this behavior is that JavaScript runs before the WebView's view-related setup takes place. This results in Android WebView providing a default value of 320x240 to JS. It is advisable to delay the execution of your JS code, like so:

function execute() {
    int height = view.getHeight();
    int width = view.getWidth();
};
window.setTimeout(execute, 300);

Answer 3

Answer №2

To ensure accuracy, I ultimately relied on the measurements retrieved from webView.getHeight() and webView.getWidth(), which were then adjusted for screen density before being passed as arguments to a javascript function using webView.loadUrl(). This approach provided me with the certainty that I was obtaining the correct values.

While following the suggestions in the preceding comments by verifying a width of 320 and a height of 240 may seem effective initially... it is important to note that this method may fail when executed on a device with those specific dimensions.

Answer 4

To ensure accuracy, I ultimately relied on the measurements retrieved from webView.getHeight() and webView.getWidth(), which were then adjusted for screen density before being passed as arguments to a javascript function using webView.loadUrl(). This approach provided me with the certainty that I was obtaining the correct values.

While following the suggestions in the preceding comments by verifying a width of 320 and a height of 240 may seem effective initially... it is important to note that this method may fail when executed on a device with those specific dimensions.

Answer 5

Answer №3

Upon further research, I have come across an alternative solution. In Java code, we can utilize the following:

new Handler().post(new Runnable(){ 
    @Override 
    public void run(){
        webview.loadUrl("...")
    }
});

By adding this to QueueMessage, and delaying the JavaScript execution, the desired outcome is achieved.

Answer 6

Upon further research, I have come across an alternative solution. In Java code, we can utilize the following:

new Handler().post(new Runnable(){ 
    @Override 
    public void run(){
        webview.loadUrl("...")
    }
});

By adding this to QueueMessage, and delaying the JavaScript execution, the desired outcome is achieved.

Answer 7

Answer №4

Here is an example of how I implemented this functionality:

C++ code in MainActivity:

webView.addJavascriptInterface(new WebAppInterface(this), "Android");

...

public class WebAppInterface {
    Context mContext;

    WebAppInterface(Context context) {
        mContext = context;
    }

    public int getWindowHeight() {
      return webView.getHeight();
    }
}

Javascript code:

var windowHeight = Android.getWindowHeight();

Answer 8

Here is an example of how I implemented this functionality:

C++ code in MainActivity:

webView.addJavascriptInterface(new WebAppInterface(this), "Android");

...

public class WebAppInterface {
    Context mContext;

    WebAppInterface(Context context) {
        mContext = context;
    }

    public int getWindowHeight() {
      return webView.getHeight();
    }
}

Javascript code:

var windowHeight = Android.getWindowHeight();

The WebView is providing incorrect window.innerHeight measurement

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Get the ability to download numerous files simultaneously with pdfMake

The welcome message in Discord.js is displaying the user as a string of numbers instead of their real username

Include a link to a JavaScript file within a dynamically created HTML page in a Delphi VCL application

Update background to full screen and include text when hovering over DIV

Testing the 'this' object in AngularJS

Locate the timing, press, and exact coordinates of two touchpoints happening simultaneously

What is the method for prompting a save as dialog in the browser in order to save JSON data stored in memory?

jQuery slideDown() is taking precedence over the final element

`Obtaining an array of selected values from a deeply nested JSON object`

What criteria does Angular use to determine if a promise has been fulfilled?

Issues have been reported with Firebase Authentication's createUserWithEmailAndPassword function specifically on physical devices when using a variable

Using jQuery, identify when a key has been pressed within a three.js environment

Loading Animation with jQuery and Minimum Time Delay

Looking to verify the validity of my email and phone number

Sort arrays in Javascript by their respective lengths

Ways to retrieve the name of the class belonging to the data model within Angular

"Click-to-Submit Button Triggering Error Notification before Redirecting to New Page

Is it possible to retrieve information from the parent in a Cloud Function?

How to implement dynamic color for classes in a v-for loop using Vue.js?

Navigating through intricate HTML structures with JavaScript can be challenging