Как исправить масштабирование фона в Safari на iPad?

Question

У меня есть веб-сайт с огромным фоновым изображением (2000x1500) в контейнере div (100% x 100%).

Когда я открываю этот сайт в Safari на iPad, он уменьшается (~ 40%) в пропорции, отличной от содержания (~ 80%).

Я переместил фон в img-тег в div с шириной 100% и высотой 100% и настройкой переполнения «скрытый». Точно так же происходит.

Существует ли настройка CSS, которая может помочь Safari уменьшать фоновые изображения в той же пропорции, что и содержимое?

Answer 1

Добавление этого сработало для меня, когда у меня было фоновое изображение на фоне холста ...

body{ -webkit-background-size: 2000px 1400px;}

Очевидно, что необходимо заменить размеры на правильный размер изображения.

Answer 2

Вам определенно следует создать отдельную таблицу стилей для iPad.Для этого вы можете использовать следующее:

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />

По этой ссылке вы найдете информацию об ориентации вашего сайта на iPad и о том, как с этим справиться.

Мой советбыло бы, чтобы создать отдельную таблицу стилей (файл CSS) для версии вашего сайта для iPad, независимо от того, что вы делаете, вы просто должны создать ее и добавить тег ссылки, как показано выше.

Если выЕсли у вас есть фоновое изображение размером 2000x1500 пикселей для версии для iPad, вы можете уменьшить его до размера iPad, если это единственное, с чем у вас есть проблемы.Я бы сказал, что вы должны уменьшить размер изображения до 1024 пикселей и объявить его в отдельной таблице стилей для iPad, и вы увидите конечный результат.

Дайте мне знать, как оно работает.

Кстати, вы также должны прочитать эту статью: http://www.inspiredm.com/2010/02/09/ipad-design/

Answer 3

Похоже, что эта проблема возникает только на iPad, когда у вас есть фоновое изображение, к которому прикреплен тег . Если вы поместите фоновое изображение в содержащий div, проблема может быть решена - это отличный обходной путь, если вам не нужно, чтобы ваше фоновое изображение было «исправлено», так как методы, позволяющие сделать фон в IE работают требует, чтобы вы использовали тег для изображений.

Вы можете увидеть разницу в этих двух сайтах, первый использует тег для позиционирования (из-за фиксированного позиционирования на фоновом изображении), а второй использует содержащий div:

http://www.mricsi.com http://www.collinshirsch.com

Надеюсь, это поможет!

edit - это не совсем точно - кажется, что так бывает только в некоторых случаях, и причина этого неясна.

Answer 4

У меня 5400x556 в качестве (прокручиваемого) фонового изображения в div. Как .jpg он сильно сокращается, а .png это нормально. Единственная проблема сейчас - это .png 5 мегабайт. Grr.

Хороший вызов для отдельных таблиц стилей.

удачи

1007 * Owen *

Answer 5

Вы можете использовать решение @UXdesigner для создания отдельной таблицы стилей для iPad. Но вы можете использовать один оператор в вашей текущей таблице стилей:

@media only screen and (max-device-width: 1024px){
  .yourClassname{
    max-width: 500px;
  }
}

и, конечно, для небольших устройств, таких как телефоны, вы можете использовать:

@media only screen and (max-device-width: 480px){
  .yourClassname{
    max-width: 100px;
  }
}

Обратите внимание, что эти предложения работают только в CSS3 (все последние устройства принимают это)

Answer 6

Я использую:

 body {min-width:2000px; min-height:1500px }