CODEWITHSUNDEEP
csscordovaheightgalaxyfont-size
Frisco
Frisco

Reputation: 3

Phonegap + Galaxy s3 Sizes

I published my first application to "play store" and is made with PhoneGap.

The application looks good on all devices, but in Galaxy S3 and Note II font-size and div height are too large.

I have:

if (window.devicePixelRatio == 1.5) {
          document.write('<link rel="stylesheet" type="text/css" href="css/hdpi.css">');
        } else if (window.devicePixelRatio == 1) {
          document.write('<link rel="stylesheet" type="text/css" href="css/mdpi.css">');
        } else if (window.devicePixelRatio == 2) {
          document.write('<link rel="stylesheet" type="text/css" href="css/xhdpi.css">');
        } else if (window.devicePixelRatio == 0.75) {
          document.write('<link rel="stylesheet" type="text/css" href="css/ldpi.css">');
        }

to load the correct style sheet.

Galaxy S3:

http://img17.imageshack.us/img17/7998/16761073.png

Nexus 4:

http://img802.imageshack.us/img802/2327/88668575.png

Two devices are 720x1280.

Upvotes: 0

Views: 580

Answers (2)

Frisco
Frisco

Reputation: 3

The problem is that using media queries like:

 @media only screen and (max-device-width: 720px) and (orientation:portrait) { 
.divbtn{ height:244px;} 
}

I target also to other devices that not are S3

Upvotes: 0

wmfairuz
wmfairuz

Reputation: 1043

Imo, the best practice is use media queries in css to detect large screen.

With media queries, you can detect the screen size and do proper adjustments to your css.

You can reset the font-size to the device's default font size by doing font-size : 100%

Upvotes: 1

Related Questions