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: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Answer 2

Хитрость в том, чтобы придать телу минимальную ширину

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

Answer 3

Ваша проблема - масштабирование фонового изображения. При рендеринге любого изображения Safari на iPad будет пытаться масштабировать его так, чтобы оно наилучшим образом соответствовало устройству. Если фактический размер изображения больше, чем у iPad, он масштабируется. В этом случае фоновое изображение имеет размер 1280x3900 - намного больше, чем разрешение iPad - поэтому Safari пытается изменить его размер, чтобы он поместился по вертикали.

Этот вопрос в другом месте Stack Overflow может помочь вам решить эту проблему. Я согласен с предложением респондента изменить размер фонового изображения и отправить его с помощью медиазапроса только на 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;
  }
}