Programmatically mimic 2x mode (or double scale) of iPhone apps on iPads?

Viewed 658

Our iPhone app, built with PhoneGap, is published as a Universal app. The Universal setting is required for app discovery on iPads and for the execution of certain PhoneGap plugins.

We tweaked a few height and width settings, but the scale is too small for some users.

We don't have the capacity to re-code the app and recreate assets for optimal rendering on iPads.

Instead, we would like to mimic the 2x mode available on iPads -- but only on iPads. 2x mode was available when the app was iPhone-only, but the option is obviously gone now that it's a Universal app.

Is there a way to invoke this functionality, either through HTML/CSS/JS or through Objective-C?

Thanks!

5 Answers

If you are loading images in html . You should set images in css and not in html directly using @media tags you need to write separate css for iPhone/iPad , iPhone/iPad retina .

http://stephen.io/mediaqueries/ . This link has all queries @media description

For example:

Index.html

  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
   <div class="mynewDiv">
    ……………………………………

    ……………………………
    <div>

And in style.css

/* iPad STYLES GO HERE */

    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : portrait)  {
        .mynewDiv
        {
          background: url("../image/iPadBg.png");
        }
    }
/* iPhone5 STYLES GO HERE */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { 
       .mynewDiv
        {
          background: url("../image/iPhone5bg.png");
        }
}
/* iPhone STYLES GO HERE */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
       .mynewDiv
        {
          background: url("../image/iPhone5bg.png");
        }

 }

Like this you have to modify your html and css . Then appropriate images will loaded in devices

Related