Система семантической сетки, проблема медиазапроса

Question

Я использую Semantic Grid System для создания адаптивного сайта. Тем не менее, что-то не так с медиа-запросами, которые, очевидно, должны срабатывать, как только он достигает определенного размера экрана.

Я приведу ссылку на их пример на веб-сайте: например, если я посмотрю это на своем iPhone, учитывая, что он должен адаптироваться к структуре с одним столбцом на мобильном устройстве, он все равно выбрасывает веб-версию стр. Это верно как для Safari, так и для Chrome на моем iPhone. Однако, если я использую букмарклет RWD, чтобы проверить его внешний вид при разных разрешениях, он будет выглядеть так, как ожидается для мобильного разрешения. Кроме того, по иронии судьбы, если я изменяю размер страницы в Safari на своем рабочем столе, он также корректируется, как только я добираюсь до размера экрана, но не в Firefox.

Медиа-запрос, который он использует после достижения 720px,

@media screen and (max-width: 720px) {
#maincolumn,
#sidebar {
    .column(12);
    margin-bottom: 1em;
}
}

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

Есть идеи, в чем может быть проблема?

Answer 1

Поведение, которое вы описываете, может быть результатом не использования метатега 'viewport' в вашей разметке:

<meta content="width=device-width" name="viewport">

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/