Медиа-запросы работают на мобильных устройствах, но не в браузере.

Я использую следующий код в верхней части моего документа:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1" />
    <link href="<?php bloginfo('template_url'); ?>/css/960-12-15-15-fluid.css" rel="stylesheet" type="text/css" />
    <link href="<?php bloginfo('template_url'); ?>/css/gsfest.css" rel="stylesheet" type="text/css" />
    <link href="<?php bloginfo('template_url'); ?>/css/gsfest-tablet-portrait.css" rel="stylesheet" type="text/css" media="screen and (max-width: 768px)" />
    <!--<link href="<?php bloginfo('template_url'); ?>/css/gsfest-smartphone-landscape.css" rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" />-->
    <link href="<?php bloginfo('template_url'); ?>/css/gsfest-smartphone-portrait.css" rel="stylesheet" type="text/css" media="screen and (max-width: 320px)" />
</head>

Отзывчивый CSS отлично загружается при просмотре на мобильном устройстве, а также в представлении адаптивного дизайна в FF, но когда я просто пытаюсь изменить размер браузера в FF или Chrome, он остается с макетом рабочего стола.

Кто-нибудь знает, почему? Я использую тот же код, который я всегда использую, и у меня не было этой проблемы в прошлом, если только я не забыл включить что-то


mobile html response css responsive-design
person Community    schedule 17.08.2014    source источник
comment
Можете ли вы также поделиться некоторыми css? jsfiddle был бы лучше.   -  person aniskhan001    schedule 17.08.2014

Ответы (1)


arrow_upward
1
arrow_downward

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

Кроме того, помните, что стандартные каскадные правила по-прежнему применяются, поэтому, если у вас есть правило, установленное в ваших первых двух таблицах стилей (960-12-15-15-fluid.css и gsfest.css), оно будет применяться в разных окнах просмотра, если оно более высокая специфичность.

Удачи

person David Taiaroa    schedule 17.08.2014
comment
спасибо, только что попробовал, но, похоже, это не сработало. Затем, изучив его еще немного, я понял, что стили для планшета загружаются нормально, но браузер не будет сужаться до 320 пикселей при изменении размера! И еще не было настройки таблицы стилей для портрета смартфона - person ; 23.08.2014