Issue with JavaScript and Phonegap on Android: screen.width is giving inconsistent and inaccurate values

Upon launching my Phonegap app on Android with the "deviceready" event, I am experiencing unusual behavior in terms of screen width values. Specifically, on a ZTE Blade device with a native 800px resolution, the screen.width returns false values such as 320, 533, or 787 px (while window.innerWidth remains consistent). This inconsistency persists even within a single app instance when querying multiple times...

In my AndroidManifest.xml file, I have set android:screenOrientation="landscape". The development environment includes Phonegap/Cordova 1.8.1 on Eclipse (Indigo).

Here are some sample values of screen.width:

in index.html

  • before document.addEventListener+"deviceready": 320
  • just after "deviceready": 320

Following three redirects (changing window.location to different HTML files) due to splash screens, the final page reached is main.html. For debugging purposes, I include my .js code in each file and observe the following console logs:

  1. 320
  2. 787
  3. 787

This inconsistent behavior is quite perplexing...

Answer №1

Make sure to check out this in-depth article with comparison tables on various values:

I trust that this information will assist you with your concern.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it necessary for me to master React in order to code with React Native?

As I move on to learning React and/or React Native after mastering Angular, it feels like a natural progression in my development journey. My understanding is that React Native could streamline the process of building Android/iOS native apps within one pr ...

exciting, showcasing a dependency map using svg within an html5 environment

I am working on creating a polygon background for my menu, which needs to be responsive in design. Here is an example of what I am trying to achieve: example image. Should I use JavaScript to listen for size changes and adjust the points for the polygon e ...

Error: Attempting to import statement outside of module when calling JavaScript from Python (Dash)

I am attempting to incorporate a three.js example from the fireship-io YouTube channel to create an animated background on my Python dash application based on user scrolling. The JavaScript script continuously calls a function to update object rotation and ...

Step-by-step guide on generating and showcasing an event exclusively using the Calendar Strip React Native npm module

I recently started exploring the world of React Native and Expo, and I have been diving into the documentation for Calendars in React Native and Expo. During my research, I came across a fantastic npm package called Calendar Strip that caught my attention. ...

Different ways to notify a React/Next.js page that Dark Mode has been switched?

I am in the process of creating my first basic Next.js and Tailwind app. The app includes a fixed header and a sidebar with a button to toggle between dark and light modes. To achieve this, I'm utilizing next-theme along with Tailwind, which has been ...

Display just a fraction of a picture

Just recently, I had a surprising discovery when I right-clicked on the cross icon and noticed that the background image in the Tags section of the Ask Question page contained multiple icons beyond just the cross. Curious about how this was achieved, I sea ...

Utilizing TranslateHttpLoader with a service URL in ngx-translate: A step-by-step guide

My goal is to retrieve translated text from a content management system by using a service URL. While using a JSON file has been successful, I am unsure of how to utilize a service URL for this purpose. The code below is what I have tried without success: ...

Utilizing Ajax to Populate a Dropdown List with Data

Currently, I am retrieving data from an API. The data consists of IDs and charity names that need to be displayed in a dropdown list. While I have successfully shown the charity names in the dropdown list, I am struggling with including the IDs. How can I ...

Mobile device not displaying Bootstrap menu

I'm having trouble understanding why the bootstrap menu isn't visible on mobile and tablet devices. Check it out live at: ...

Avoid triggering onClick events of sibling elements while a click event is being processed in React.Js

What is the most effective solution to this issue? I am faced with a scenario where I have a parent component called (Board) and four child components named (GameButton) which act as clickable buttons. When a button is clicked, it lights up for 0.5 second ...

Arranging an array in Javascript containing both strings and numbers

I am working with an array in Javascript that contains elements with information about free space on different datastores: myArray = ["Datastore one - free space 34.23GB", "Datastore two - free space 56.23GB",...] I want to sort this array based on the a ...

Leverage the Width of a Nested Row within Foundation Framework

Here's a different layout option with a sidebar <div class="row"> <div class="main-content columns small-6> {main content} </div> <div class="columns small-6> {sidebar} </div> </div> And here is a ...

Prevent uniform width for child elements in flexbox when using flex-direction column

In my navigation bar, I implemented flex with flex-direction column to stack the child elements vertically. However, I am facing an issue where all the child elements have the same width. I want each child element to have its own specific width so that I c ...

Retrieve data from a variable that is located within a function that is also

<script> const tally ={ total: 0, increase: function(){ total++; console.log(total); } } const selectBtn = document.getElementsByTagName('button& ...

What is the reason for the error that Express-handlebars is showing, stating that the engine

I recently added express-handlebars to my project and attempted the following setup: const express = require("express"); const exphbs = require('express-handlebars'); const app = express(); app.engine('.hbs', engine({defaultL ...

What is the impact of Javascript variable scope in the context of "for...in..." loops?

Imagine you have a code snippet like this: dict = {"key":"elem"} for (var elem in dict){ someFunction(function(){ anotherFunction(dict[elem]); }) } Question: Is elem still considered as the temporary variable created in the for...in... s ...

The addition of an asynchronous call caused Array.map to start experiencing errors

I am working on a React component that iterates through an array of messages and renders JSX based on certain conditions: messages.map(async (msg) => { let previewImage: URL | undefined = undefined; if (msg.mediaId) { previewImage = await stora ...

How can I add a variable to an object in Three.js?

Creating an object in Three.js and adding a variable seems like a simple task, but I'm struggling to figure it out. For instance, I want to create a cube and have it store a variable called "beenHit" that can be accessed later on. var geometry = new ...

Need to install a secondary application on iOS platform

In my main 'core' application, I have implemented functions that can be accessed by other applications through a URL call, such as core://get_result. This method of integration is inspired by examples found on . I am looking to facilitate third- ...

Unable to load `fs-extra` using `require()`: encountering error message "Module fs-extra not found"

Having trouble utilizing installed npm packages like fs-extra in the js files provided by Truffle. The error message "can't find module 'fs-extra'" keeps popping up. 1) Attempted to import local js files using the require() method, but it w ...