У меня есть веб-сайт с использованием огромного фонового изображения (2000x1500) в контейнере div (100% x 100%).
Когда я открываю этот сайт в Safari на iPad, он уменьшается (~ 40%) в другой пропорции, чем контент (~ 80%).
Я переместил фон в img-tag в div со 100% шириной и высотой 100% и настройкой переполнения "скрыто". Точно так же происходит.
Есть ли настройка CSS, которая может помочь Safari масштабировать фоновые изображения в той же пропорции, что и контент?
Вы должны создать отдельную таблицу стилей для 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/
Добавление этого сработало для меня, когда у меня было фоновое изображение на фоновом холсте...
body{ -webkit-background-size: 2000px 1400px;}
Очевидно, нужно заменить размеры с правильным размером для изображения.
Кажется, что эта проблема возникает только на iPad, когда у вас есть фоновое изображение, которое прикреплено к <body> тег. Если вы поместите фоновое изображение в содержащий div, проблема может быть решена - это отличная работа, если вам не нужно фиксировать фоновое изображение, так как методы фиксации фона в IE укажите, что вы используете <body> тег для изображений.
Вы можете видеть разницу в этих двух сайтах, первая использует <body> тег для позиционирования (из-за фиксированного позиционирования на фоновом изображении), а второй использует содержащий div:
http://www.mricsi.com http://www.collinshirsch.com
Надеюсь, что это поможет!
edit - это не совсем точно - кажется, что это так только в некоторых случаях, и причина, почему почему-то непонятна.
У меня есть 5400x556 в качестве (прокрутки) фонового изображения в div. Как .jpg, он резко сокращается, как .png это хорошо. Единственная проблема теперь в том, что .png составляет 5 мегабайт. Grr.
Хороший вызов для отдельных таблиц стилей.
удача
Owen
Я использую:
body {min-width:2000px; min-height:1500px }
Вы можете использовать решение @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 (последние устройства все это принимают)