текст вне строки при просмотре сайта с мобильного

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

http://www.digitalgenesis.com.au/2012-websites/qsoils/example3.html

Все остальное на странице отображается идеально, и я безуспешно пытался определить проблему

Я бы хотел, чтобы текст под темно-бордовыми заголовками отображался во всей ширине, что составляет 60% от общего размера контейнера, текст также должен быть центрирован относительно темно-бордовой строки, как это происходит на нормальном размере экрана, поскольку каждый тег .info имеет дан запас: 0 авто; имущество

Любая помощь будет принята с благодарностью, даже если это не фатальная ошибка для дизайна, Ура


mobile html css text-alignment fluid-dynamics
person theaphidkid    schedule 18.07.2012    source источник
comment
Я не вижу проблемы, когда тестирую это здесь. тестовый сайт   -  person imakeitpretty    schedule 18.07.2012

Ответы (2)


arrow_upward
1
arrow_downward

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

Возможное решение - предоставить разные правила CSS для разных размеров экрана, например

@media screen and ( max-width: 480px) {
  #truck img {
    width: 460px;
  }
  .info {
    width: auto;
  }
  /* etc... */
}

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

Другой вариант - использовать структуру CSS с поддержкой линеаризации, например YAML, и перестроить дизайн. Или, возможно, сочетание того и другого, поскольку изображение в любом случае потребует особого ухода.

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

person dualed    schedule 18.07.2012

arrow_upward
0
arrow_downward

Попробуйте указать абзацу {text-align: justify;} и посмотрите, поможет ли это уменьшить проблему с правильным интервалом в мобильном браузере.

person Raj    schedule 18.07.2012