iPad和iPhone：整页背景图片显示包含剪切/屏幕截图链接

Question

整页背景图片显示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;
}

Answer 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

Answer 2

诀窍是给身体最小宽度

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

Answer 3

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

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

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

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

Answer 4

尝试添加：

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

Answer 5

代码在这里

它修复了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;
  }
}