Проблема CSS на iPad / iPhone

0

У меня большой опыт работы в CSS, и я не могу понять, что происходит с этим сайтом, над которым я работаю:

http://lockwoodstorage.com/

Все выглядит отлично во всех браузерах, но на iPhone и iPad, фоновые материалы обрезаны с левой стороны. Я пробовал медиа-запросы, и я попытался найти в браузерах, какой контейнер может вызвать это, но я не могу понять, как это понять.

Я знаю, что это довольно простой вопрос (и я всегда использую Qaru в качестве последнего средства), но, возможно, здесь есть проблема, в которой я не разбираюсь (и это может помочь на форуме в будущем, я обновлю вопрос если это нечто более сложное). Любые идеи очень приветствуются. Спасибо!

РЕДАКТИРОВАТЬ

FYI, я не пытаюсь сделать этот сайт отзывчивым. Я просто пытаюсь правильно отобразить его на iPhone и iPad. Я также вижу проблему, когда время загрузки SUPER slow на iOS по какой-то причине.

Соединяя этот сайт, я использовал тему Twenty Twelve и просто настроил ее по своему вкусу. Это была не отзывчивая тема, просто базовая.

Я поставил щедрость на это. Имейте это! Спасибо за помощь.

  • 0
    Не могли бы вы показать картину вашей проблемы и другую картину того, что является предполагаемым решением. У меня и, возможно, у других нет iPhone или iPad для тестирования.
  • 0
    Обновление: я вижу, что #page имеет максимальную высоту 485 пикселей, что приводит к уменьшению синего фона на мобильном устройстве, обнажая полосатый фон за ним. Это то, что вы имеете в виду? Если это так, измените max-height: 485px на min-height: 485px или, возможно, меньше, потому что похоже, что изображение, которое вы видите, не имеет 485px в высоту.
Теги:
iphone
ipad

4 ответа

4
Лучший ответ

В вашем заголовке вы используете свойство CSS float: left, которое вызывает эту проблему. Просто удалите это свойство CSS, и ваша проблема будет решена.

А затем, если вы хотите поместить ваши элементы влево в заголовке, вы можете сделать это, нацеливая каждый отдельный элемент. например

#logo, #nav
{
 float:left;
}

Также @<div id=page> измените максимальную высоту на минимальную высоту, и вы все настроите. Надеюсь, это поможет вам.

Поделиться
2

Вы должны использовать min-height:485px на месте max-height:485px

Поделиться
0

Mx Я также соглашусь с Дэвидом. вы должны сначала разработать его для мобильных устройств, потому что, поскольку вы пытаетесь настроить его для мобильных устройств, потребуется много времени и усилий, если у вас есть проблемы во многих местах.

если у вас есть проблемы в нескольких местах, вы можете сделать это, поставив медиа-запросы, Проценты для ширины и высоты вместо фиксированных значений. аналогично вы можете использовать em вместо пикселей, где это требуется.

Однако, как я уже упоминал ранее, потребуется больше времени для настройки. Итак, я предлагаю использовать Zurb Foundation или Twitter Bootstrap.

Поделиться
0

Если вы собираетесь сделать отзывчивый сайт, вы должны сначала его создать. Таким образом, вы можете стилизовать каждый элемент в отношении устройства, чтобы он отображался правильно, добавив точки останова на пути к более крупным устройствам.

На данный момент похоже, что вы создали сайт для рабочего стола, а затем добавили несколько медиа-запросов, чтобы переместить элементы, чтобы попытаться их подобрать. Это создаст для вас больше работы и определенно будет разочаровывать.

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

Поделиться
  • 0
    Я основал это на шаблоне WordPress. Я не добавил запросы, я просто использовал существующие. Сайт не должен быть адаптивным, мне просто нужно, чтобы он правильно отображался на мобильном телефоне, и это не так. Вы видите эту проблему на своем конце?
  • 0
    В этом случае я думаю, что вы можете просто удалить медиа-запросы и точку зрения в заголовке документа. Тогда настольная версия должна отобразиться на мобильном телефоне.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню