如何防止启动图像在 iOS 7 的 Web 应用程序中垂直拉伸？答案

【问题标题】：How can I prevent the startup image from stretching vertically in web apps in iOS 7?如何防止启动图像在 iOS 7 的 Web 应用程序中垂直拉伸？
【发布时间】：2013-11-07 15:41:44
【问题描述】：

我正在 iOS 7 中创建一个 iPhone 独立网络应用程序。我指定了一个启动图像，但它总是垂直拉伸额外的 40 像素。我认为这是为了弥补 iOS 7 中新的透明状态栏样式。

我想指定一个 1136 像素高（iPhone 屏幕的全高）的图像，因此它不需要拉伸，但它不起作用。

<link rel="apple-touch-startup-image" href="startup_640_1136.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

当我提供 1136 像素高的图像时，什么都没有显示。当我提供一个 1096 像素高的图像时，它会垂直拉伸，就像此比较图像中的左侧一样：

我画了线条来说明图像是如何被拉伸的。预期结果在右边，实际在左边。

【问题讨论】：

这个问题会不会和你的类似-stackoverflow.com/questions/19071414/…？

标签： ios ios7 iphone

【解决方案1】：

iOS7 上启动图片的大小：

纵向（非视网膜）：768x1024 像素人像（视网膜，2x）：1536x2048 像素

横向（非视网膜）：1024x768 像素横向（视网膜，2x）：2048x1536 像素

如您所见，您的图片高度应为纵向 1024/2048 像素（非视网膜/视网膜）和横向 768/1536 像素（视网膜/非视网膜）。

能否请您说明为什么您考虑了 1136/1096px 的高度（这些不是您需要的高度。）？

【讨论】：

我的号码是 iPhone 的。看起来您的号码适用于 iPad。我相信 iPad 上也存在同样的问题，但我现在专注于 iPhone。我已经更新了我原来的问题，更清楚我指的是 iPhone。