为什么我的图像对于 iPhone 来说太大了答案

【问题标题】：Why are my images too big for iPhone为什么我的图像对于 iPhone 来说太大了
【发布时间】：2012-02-13 18:46:05
【问题描述】：

我使用以下设置创建了一个 Photoshop 文档：

宽度：640 像素
高度：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>

【问题讨论】：

我不知道phonegap，但是发个截图或者一些源代码对这里的每个人都有帮助，我猜。
您保存的图像的最终尺寸是多少？每英寸 326 像素可能是问题所在 - Photoshop 可能会因此存储具有更大像素大小的文件
尝试在文件末尾添加@2x。示例：supermegacoolpicture@2x.png
我曾经在使用 300ppi 图像时遇到过同样的问题。尝试将分辨率降低到 90ppi。高分辨率只适合打印

标签： iphone cordova

【解决方案1】：

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

【讨论】：

即使是 72，图像仍然显得更大。

【解决方案2】：

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

iPhone 3G/3GS - iPod
宽度：320px
高度：480 像素
分辨率：72px/英寸
颜色方法：RGB 8bit
像素比：方形像素

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

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

【讨论】：

我已经完成了您在这里的确切规格，但它仍然使图像过大。我什至在 xcode 中查找了图像，它说它的大小为 640x960，为 72 像素/英寸。我也尝试了@2x 的东西，但这似乎也不起作用。任何想法
我不知道phonegap，很遗憾我无法为您提供帮助...我每天都使用这些设置，我从来没有遇到过问题...

【解决方案3】：

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

如果你想一想，虽然里面装了更多的像素，但屏幕尺寸还是一样的。此外，当您将图像设置为更大的视网膜尺寸时，它会更有意义，因为您的图像显示太大。

【讨论】：