CODEWITHSUNDEEP
androidjquery-mobile
micred
micred

Reputation: 1532

How to fix viewport scaling with JQuery Mobile on Android HDPI devices

I find that JQuery Mobile pages look good on MDPI devices (like G1) but they look extremely small on HDPI devices (like Samsung Galaxy S).

Here image from Android emulator with resolution 320x480 and 160 dpi:

mdpi

Here image from Android emulator with resolution 480x800 and 240 dpi:

hdpi

To see disproportions compare size of JQuery text with size of native Android interface (clock).

EDITED: screenshots taked with the following viewport settings:

<meta name="viewport" content="initial-scale=1, width=device-width, target-densitydpi=device-dpi"/>

Upvotes: 1

Views: 7309

Answers (3)

polarfish
polarfish

Reputation: 105

From JQM version 1.1 hack with zoom level doesn't work any more because zoom is disabled by JQM.

Page meta[name='viewport'] content, after activity is started and first page is loaded:

initial value initial-scale=1

JQM 1.0.1 initial-scale=1

JQM 1.1.0 initial-scale=1,maximum-scale=1, user-scalable=no

So the solution is to remove densitydpi=device-dpi from meta[name='viewport'] content, because it's preventing "native scaling" performed by android (see thorough explanation on http://developer.android.com/guide/webapps/targeting.html, section Defining the viewport target density).

Upvotes: 4

Pradeep Vijayakumar
Pradeep Vijayakumar

Reputation: 1

Yep, the resolutions are not proportional across the devices you mentioned, right?

ie. 320:480 is not same as 480:800

The device has upscaled your app's width and height proportionally, which leaves you with empty space in the height component.

So that has nothing to do with jQuery as such, just that your app needs design enhancements to support high end devices.

I don't know what your requirement is but here's what I did to solve this for my app:

Introduce useful content to fill up the height for the high res devices. To explain at a code level, I had additional content inside a div with id moreContentForHighEndDevices, and used CSS media queries to conditionally display it, like below:

#moreContentForHighEndDevices {
    display:none;
}

@media screen and (-webkit-device-pixel-ratio: 1.5) {
    #moreContentForHighEndDevices {
        display: block;
    }
}

Upvotes: 0

micred
micred

Reputation: 1532

The most effective way to maintain consistency between screen sizes across Android devices is to change the zoom level of the WebView that loads you (web)app. It doesn't require code changes at HTML level.

public class YourApp extends DroidGap {
    /** Called when the activity is first created. */

    // declare the original size of the iPad app
    protected float ORIG_APP_W = 320;
    protected float ORIG_APP_H = 480;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        super.loadUrl("file:///android_asset/www/index.html", 3000);

        // get actual screen size
        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 );

        // make sure we're all good
        Log.v( TAG, "ORIG_APP_W" + " = " + ORIG_APP_W );
        Log.v( TAG, "ORIG_APP_H" + " = " + ORIG_APP_H );
        Log.v( TAG, "width" + " = " + width );
        Log.v( TAG, "this.appView.getMeasuredHeight() = " + height );
        Log.v( TAG, "globalScale = " + globalScale );
        Log.v( TAG, "this.appView.getScale() index=" + this.appView.getScale() );

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

Upvotes: 2

Related Questions