Question

我使用以下设置启动了一个Photoshop文档：

宽度：640px
高度：960px
分辨率：326像素/英寸
图像直接从该文件中获取。

我正在使用phonegap来构建应用程序。每当我测试它时，它都会使我的图像对于iPhone屏幕来说太大了。我没有使用视口或调整任何大小。请帮忙！

有些人在问我的代码：

    <!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>

Answer 1

只需创建640x960尺寸的图像，不要设置326 ppi。只需使用默认设置。

Answer 2

您无需设置该分辨率...要在Photoshop中创建iPhone应用程序UI，请使用以下设置：

iPhone 3G / 3GS - iPod
宽度：320px
高度：480px
Resoluzion：72px / inch
颜色方法：RGB 8bit
像素比：方形像素

iPhone 4
宽度：640px
高度：960px
分辨率：72px /英寸
颜色方法：RGB 8bit
像素比：方形像素

当您保存较大的图像（视网膜显示）时，请记住使用较小的名称命名它们，并在.png之前添加@2x

Answer 3

即使您使用的是“视网膜”尺寸图像，仍需要在CSS（和config.xml）中将尺寸（分辨率）指定为320x480

如果您考虑一下，虽然包含更多像素，但屏幕尺寸仍然相同。此外，当您将图像设置为更大的视网膜大小时，图像显示得太大，这更有意义。

为什么我的图片对iPhone来说太大了

3 个答案: