iPad 和 iPhone：整页背景图像显示截断/包含屏幕截图链接答案

【问题标题】：iPad & iPhone: full page background image shows cut off /screen shot link includediPad 和 iPhone：整页背景图像显示截断/包含屏幕截图链接
【发布时间】：2012-02-13 12:39:23
【问题描述】：

整页背景图片在 iPhone 和 iPad (safari iOS 5.01) 上显示为截断。 http://www.theantarcticbookofcookingandcleaning.com

如果您能给我一些建议，那就太好了。提前感谢您的帮助！

截图如下： http://www.soojincreative.com/photo.PNG

使用的代码 -> 背景图片在#wrapper:

enter code here
body {
font: normal normal 16px/22px "Kingfisher Regular", Georgia, "Times New Roman", serif;
font-size-adjust: 0.47;
color: #000;
background-color: #e3e8ee;
margin-top: -13px;   
}

#wrapper {
padding-top:none;
background: url('images/background2.jpg') no-repeat center;
width: 1280px;
margin: 0 auto;
overflow:hidden;
}

【问题讨论】：

不是答案，但您的页面也不能很好地处理桌面屏幕。背景图像不会按比例放大以处理非常大的窗口，并且使窗口变小会切断内容。此外，您正在尝试包含来自本地服务器 (127.0.0.1:8080) 的样式表（错误显示在 Safari 错误控制台中）。

标签： iphone css ipad background-image safari

【解决方案1】：

好吧，对我来说只是替换：

<meta name="viewport" content="width=device-width">

作者：

<meta name="viewport" content="width=1024">

成功了。您可能想尝试一下。

如果它不适合您，那么 Apple Safari Dev Docs 可能会对您有所帮助： https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

【讨论】：

这实际上效果很好，并不是因为加载速度而具有这样的背景非常好，但我将我的宽度设置为我的背景图像宽度并修复了截止。

【解决方案2】：

代码在这里

它修复了 ipad 的背景图像

只需根据您的图像尺寸输入尺寸

/* Page background-image landscape for iPad 3 */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2) {
  .introduction-section {
    -webkit-background-size: 2024px 768px !important;
    background-size: 2024px 768px !important;
    background: url('background-image.jpg') no-repeat center top #000 !important;
  }
}
/* Page background-image portrait for iPad 3 */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2) {
  .introduction-section {
    -webkit-background-size: 2024px 768px !important;
    background-size: 2024px 768px !important;
    background: url('background-image.jpg') no-repeat center top #000 !important;
  }
}
/* Page background-image landscape for iPad 1/2 */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 1) {
  .introduction-section {
    background: url('background-image.jpg') no-repeat center top #000 !important;
    -webkit-background-size: 2024px 768px !important;
    background-size: 2024px 768px !important;
  }
}
/* Page background-image portrait for iPad 1/2 */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 1) {
  .introduction-section {
    background: url('background-image.jpg') no-repeat center top #000 !important;
    -webkit-background-size: 5024px 2024px !important;
    background-size: 5024px 2024px !important;
  }
}

【讨论】：

【解决方案3】：

诀窍是给主体指定最小宽度

body{ width:100%;min-width: 1280px; }

【讨论】：

鲍比的精彩评论！
甚至添加overflow-x: hidden; 以确保它不会超过这个宽度

【解决方案4】：

您的问题是背景图像缩放。渲染任何图像时，iPad 上的 Safari 会尝试对其进行缩放以最适合设备。如果图像的实际尺寸大于 iPad 的显示，它会缩放。在这种情况下，您的背景图像为 1280x3900——比 iPad 的分辨率大得多——因此 Safari 正在尝试调整它的大小以适应垂直方向。

This question Stack Overflow 上的其他地方可能会帮助您解决此问题。我同意响应者的建议，即调整背景图像的大小并使用媒体查询仅提供给 iPad，并将其留在桌面浏览器上。

要实现媒体查询，请将以下内容添加到 CSS 文件的底部：

@media screen and (max-device-width: 1024px) {
    #wrapper {
        background-image: url('/path/to/smaller/background/image.png');
    }
}

【讨论】：

【解决方案5】：

尝试添加：

#wrapper { ...
    background-size: cover;
... }

【讨论】：