Почему заголовок перекрывается в мобильном браузере?

Question

Как сделать так, чтобы область заголовка не перекрывалась на http://androdevlab.com при просмотре в мобильном браузере?

Answer 1

Вы должны использовать медиа-запросы. Подробнее о медиазапросах вы можете прочитать здесь:

http://www.w3.org/TR/css3-mediaqueries/

http://reference.sitepoint.com/css/mediaqueries

http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

Вы также можете использовать плагины, такие как FitText.js - http://fittextjs.com/

Глядя на код вашего сайта в Firebug, основная проблема заключается в том, что высота строки «Портативная лаборатория в Нью-Йорке устройств Android, доставляемых к вашей двери», слишком велика. В настоящее время он равен 1,8 без значения. Попробуйте установить его на меньшее значение, например 1em или 1.25em. Аналогично для nav-primary li a класса.

Кроме того, ширина элемента nav определяется как 980px, поэтому на любом устройстве это будет фиксированное значение. Может быть, вы можете попробовать установить значение на основе% или em.

Если вам нужно изменить много элементов для мобильной версии, сохраняя @screen CSS прежним, вам следует использовать медиазапросы. Делает вещи намного проще в обращении.

Answer 2

Вы должны использовать различные адаптивные трюки .например, установка тега метапортпорта, корректировка запросов @media css.указав поле и размеры в заголовке с помощью% или em вместо px других заданных размеров и т. д., вы можете использовать библиотеки js, такие как syze и проекты, такие как html5boilerplate , чтобы помочь вам в этом.