css3 медиа-запрос в заголовке не работает

Question

У меня есть две таблицы стилей, одна для мобильных, одна для компьютеров. Я хочу использовать мой мобильный лист по умолчанию.

мои проверки заголовков:

<link rel='stylesheet' media='all' href='css/mobile.css' /> 
<link rel='stylesheet' media='screen and (min-width: 580px)' href='css/large.css' /> 

, но я до сих пор, кажется, использует свой большой таблицы стилей, когда я проверяю на мобильном браузере! (Iphone 4)

Answer 1

пытаются сделать что-то вроде этого: (код шахты)

<link href="css/mobile_portrait.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 320px) and (orientation: portrait)"> 
<link href="css/mobile_landscape.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 480px) and (orientation: landscape)"> 
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)"> 
<link href="css/netbook.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 1024px)"> 
<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 1224px)"> 

(это только и пример)

Answer 2

Мой вопрос заключается в том, что Iphones, кажется, чтобы изменить содержание.

я использовал:

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

... чтобы предотвратить изменение размера в браузере телефонов.

Поместите этот тег в голову прямо перед моими медиа-запросами. Теперь медиа-запрос функционирует должным образом.