CODEWITHSUNDEEP
iphonecordova
nate8684
nate8684

Reputation: 539

Why are my images too big for iPhone

I started a Photoshop document with the following set up:

width: 640px
height: 960px
Resolution: 326 pixels/inch
The images are taken directly from that file.

I am using phonegap to build an application. Whenever I test it, it makes my image far too large for the iphone screen. I'm not using a viewport or resizing anything. Please help!

Some of you were asking for my code:

    <!DOCTYPE html>
<html>
  <head>
  <title></title>

    <meta charset="utf-8">
    <link rel="stylesheet" href="iphone.css" type="text/css" />     


    <!-- iPad/iPhone specific css below, add after your main css >
    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
    <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />        
    -->
    <!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
    <script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
    </script>
  </head>
  <body onload="onBodyLoad()">

<div class="wrapper">

<img src="img/iPhone/Welcome.png" class="header" />

</div>

  </body>
</html>

Upvotes: 0

Views: 2735

Answers (3)

Jarrod
Jarrod

Reputation: 9465

Even though you're using a "retina" size image, you still need to specify the size (resolution) as 320x480 in your CSS (and config.xml)

If you think about, although there are more pixels packed in, the screen size is still the same. Also, it makes further sense as your image is displaying too big when you set it to the larger, retina, size.

Upvotes: 0

matteodv
matteodv

Reputation: 3982

You don't need to set that resolution... To create iPhone app UI in Photoshop, use these settings:

iPhone 3G/3GS - iPod
Width: 320px
Height: 480px
Resoluzion: 72px/inch
Color Method: RGB 8bit
Pixel Ratio: Square Pixels

iPhone 4
Width: 640px
Height: 960px
Resolution: 72px/inch
Color Method: RGB 8bit
Pixel Ratio: Square Pixels

When you save your bigger images (retina display), remember to name them with the same name of the smaller and add @2x before .png

Upvotes: 0

Saurabh
Saurabh

Reputation: 22873

Just create images with 640x960 size don't set 326 ppi its not needed. Just go with default.

Upvotes: 3

Related Questions