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

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.

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

Answer 2

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