Troubleshooting Cascading Style Sheet problem on Samsung Galaxy S5

In developing a Cordova Android application, I designed a CSS specifically for screen resolutions of 1080 x 1920. This CSS is accessed using media queries.

@media screen and (max-width: 680px) and (orientation:portrait) //Compatible with Galaxy S5

or

@media screen and (device-height: 1920px) and (device-width: 1080px) and (orientation:portrait) //Compatible with Galaxy S4

The CSS displays correctly on the Galaxy S4 device, but appears enlarged and broken on the S5 device, despite both having the same screen resolution.

The meta data is defined as 

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

Can you please advise on the necessary changes to resolve this issue and enable the use of the same CSS for both Galaxy S4 and S5 devices?

htmlcsscordovaphonegap-pluginsandroid

Answer №1

Update

Consider utilizing @media screen along with min/max-device-width.

For instance:

/* Style for Android Tablet (landscape) */
@media only screen and (min-device-width : 800px) and (max-device-width : 1280px) and (orientation : landscape) {
}

device-width: refers to the screen or the entire page, not just the rendering area like the document window.

[Initial response]

I faced a similar issue. You can try the following:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />

Using target-densitydpi=medium-dpi seems to resolve this problem. Keep me posted.

When using media queries, make sure to place max-device-width after max-width. Check out:

  • Mobile orientation change not applying CSS
  • What is the difference between max-device-width and max-width for mobile web?

Answer №2

After encountering a scaling issue on Android OS 4.4 Webkit, I was able to resolve it by adjusting the initial scaling of the app using the following code:

 Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
 int width = display.getWidth(); 
 int height = display.getHeight(); 

 // calculate target scale (only dealing with portrait orientation)
 double globalScale = Math.ceil( ( width / ORIG_APP_W ) * 100 );

 // set the scale
 this.appView.setInitialScale( (int)globalScale );

This solution was found on a blog post titled Scaling fixes for Android devices in Phonegap

Grateful for the assistance provided.

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

Create circular shapes using the border-radius property

I've been experimenting with converting some divs using border radius and I've almost got it, but sometimes they end up looking like 'eggs' haha. Here is the CSS code I'm using: #div{ /*central div*/ position:absolute; t ...

jquerycss

Transforming CSS Styles of Elements with Bootstrap

After incorporating links and scripts for Bootstrap v4.5 into my project, I quickly noticed that it automatically overrides the styles of text, buttons, and other elements I had previously customized. While I added a Bootstrap alert for authentication pur ...

htmlcssbootstrap-4

There are two different ways to set a hyperlink in HTML. One method is by using the href attribute, where you provide the URL inside the quotation marks. The other

While browsing, I stumbled upon this interesting piece of JavaScript code: onClick="self.location.href='http://stackoverflow.com/'" I incorporated this code into my website, and it seems to have the same effect as using the href attribute. Sin ...

javascripthtmlonclickhref

A step-by-step guide to accessing and listing all image files from the gallery using Expo in React Native

I am trying to showcase all the image files in my gallery using Expo React Native. Can anyone suggest a library for this purpose? import * as MediaLibrary from 'expo-media-library'; async function displayAllImageFiles() { if (permissionRespo ...

androidiosreact-nativeexpo

Updating Button Text with PHP on WooCommerce

Hi there, I'm trying to find a way to translate a button in my WooCommerce store without using LocoTranslate or any other tools. Is there a PHP function that can help me change the button text without needing an ID? If you want to take a look at the ...

phpcssbuttonwoocommerce

What could be causing this excessive lag?

I've been developing a new website, but the "buttons" I'm using seem to be causing significant lag. I need help resolving this issue. You can view the website here: The problematic code snippet is shown below: <td> <a href="templi ...

javascripthtmlcssimage

Is the Packery image grid only functional when the background image is specified in CSS and not in JavaScript? Perhaps we need to look into using Await/Sem

I've successfully implemented a packery image grid that is responsive and functional when the background image in the .item-content section is defined in the CSS file: http://codepen.io/anon/pen/eJdapq .item-content { width: 100%; height: 100%; ...

javascriptjqueryhtmlcsspackery

Is it possible to create a form inside a tooltip?

Looking to incorporate a jQuery feature into a form where a simple yes or no question appears upon hovering over it. However, encountering issues getting jQuery to recognize the dynamically created tooltip and submit alert function not working ("$('#w ...

javascriptjqueryhtmljquery-ui

Transferring data between pages using Apache Cordova

I have created an index.html page in Cordova Apache to implement basic authentication. The form on this page has a button with a click action that is linked to an AJAX action in jQuery. Once the AJAX call is successful, I need to store the login and pass ...

ajaxcordova

Steps to upgrade phonegap to version 3.4.0

I need to upgrade my phonegap version on Windows 7. C:\Users\jhutber>phonegap -v 3.3.0-0.19.6 npm update -g phonegap //completed successfully.... //also updated npm npm update npm -g C:\Users\jhutber>npm info phonegap version ...

androidcordovanpm

Printing specific div content from an HTML page using a print button

I have a situation where I need to control the printing functionality of my HTML page. Currently, I have two div tags in my code with a single print button at the top of the page. When I click on this button, it prints the content from both divs. However ...

htmlcss

Unable to execute the flutter doctor command to accept the Android licenses

I am trying to set up Flutter on my computer, using Android Studio and Visual Studio Code. When I ran flutter doctor, I encountered the following warning: [√] Flutter (Channel stable, v1.17.3, on Microsoft Windows [Version 10.0.14393], locale id-ID) [!] ...

javaandroidandroid-studioflutterandroid-sdk-manager

Guide to displaying API data in HTML format

This university assignment involves working on a homework project where I need to utilize a public API in HTML. So far, I have successfully called the public API to display a list of radio channels in the left menu (without adding any click functionality). ...

javascripthtmlarraysjsonajax

The code is malfunctioning on this site (yet functions perfectly on a different website)

So I have a question that may seem silly, but it's worth asking. I'm attempting to create a sticky div element that stays in place when you scroll past a certain point on the page. This is the script I have: <script type="text/javascript"> ...

javascriptjqueryhtmlcss

Invoking JavaScript function from an Android Activity

I have a simple JS function that is supposed to set values of some html contents, but it doesn't seem to be working properly. Here is the code for the JS function: function SetEdits(name,email,pic,date) { document.getElementById("myPic").src=pic; doc ...

javascriptandroidandroid-webview

Converting JSP email text into HTML format with Spring's formatting features

Currently, I am working on implementing an email service using Spring. Users have the ability to input the email subject and body in a form and send the email successfully. However, there is an issue where line breaks and tabs entered by the user are not b ...

javajqueryhtmlspringspring-mvc

Empower the user with the ability to interact through touch on dynamically

I am trying to make a div touchable and draggable. I have dynamically created 1 to 10 divs within another div. Currently, these divs can only be dragged using the mouse or cursor. However, I want to enable dragging through touch as well. Can anyone provi ...

javascriptjqueryhtml

An issue arose while setting up the project ':CordovaLib

Whenever I attempt to compile using ionic cordova build --release android This error message pops up...Any idea what could be causing it? BUILD FAILED in 0s cmd: Command failed with exit code 1 Error output: FAILURE: Build failed with an exception. * ...

node.jscordovaionic-framework

Ways to display a different div when clicking on a div?

Good afternoon, I've noticed that this question has been asked numerous times before, but none of the solutions provided seem to work for my specific issue. My problem involves a div with the class .title3. I want another div with the class .Content ...

javascriptjqueryhtmlcss

Exploring the asp.net MVC framework with the integration of HTML5 date input

Currently, I am working on an ASP.NET MVC project using Visual Studio 2013. One of the issues I am encountering is related to a date input field. When I click on the field and focus on it, the automatic HTML5 datepicker does not appear. If I enter the da ...

asp.net-mvchtmldatepicker