CSS iPad 和 iPhone：全页背景图像显示被切断/包括屏幕截图链接

iPad & iPhone: full page background image shows cut off /screen shot link included

提问by Soo

The full page background image shows cut off on iPhone and iPad (safari iOS 5.01). http://www.theantarcticbookofcookingandcleaning.com

整页背景图像在 iPhone 和 iPad（Safari iOS 5.01）上显示被截断。http://www.theantarcticbookofcookingandcleaning.com

It would be great if you could give me some advices on this. Thanks for your help in advance!

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

Screenshot is below:http://www.soojincreative.com/photo.PNG

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

the code used-> the background image is in #wrapper:

使用的代码-> 背景图像在 #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;
}

回答by phildub

Well, for me simply replacing:

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

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

by:

经过：

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

did the trick. You may want to try it.

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

If it doesn't work for you, then the Apple Safari Dev Docs may be helpful to you: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

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

回答by Bobby Tzenev

The trick is to give min-width to the body

诀窍是给身体最小宽度

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

回答by piersadrian

Your issue is background image scaling. When rendering any image, Safari on iPad will try to scale it to fit best on the device. If the image's actual size is larger than the iPad's display, it'll scale. In this case, your background image is 1280x3900—much larger than the iPad's resolution—so Safari is trying to resize it to fit vertically.

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

This questionelsewhere on Stack Overflow may help you resolve this issue. I agree with the responder's suggestion of resizing the background image and serving it using a media query only to iPadsand leaving it alone on desktop browsers.

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

To implement a media query, add the following to the bottom of your CSS file:

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

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

回答by circusdei

try adding:

尝试添加：

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

回答by comonitos

Code here

代码在这里

It fixing background images for ipad

它修复了 ipad 的背景图像

Just enter sizes according to your image dimentions

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

/* 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;
  }
}