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

Question

Это мой метатег...

<meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

Я использую точки останова как max-320, а затем max-480, когда я тестирую свою страницу с шириной устройства 320, она работает нормально, но при тестировании страницы с шириной устройства 480 все равно выбирается таблица стилей шириной 320. Почему он выбирает неправильную таблицу стилей, пожалуйста, помогите..

<link rel="stylesheet" media="only screen and (max-width:320px) and (orientation:portrait)" href="style/xxs_p.css">
<link rel="stylesheet" media="only screen and (max-width:320px) and (orientation:landscape)" href="style/xxs_l.css">
<link rel="stylesheet" media="only screen and (min-width:321px) and (max-width:480px) and (orientation:portrait)" href="style/xs_p.css">
<link rel="stylesheet" media="only screen and (min-width:321px) and (max-width:480px) and (orientation:landscape)" href="style/xs_l.css">

Это проблема в моем коде или просто эмулятор ведет себя странно? Пожалуйста помоги!!

Answer 1

Попробуйте изменить код на:

media="only screen and (max-device-width:320px) and (orientation:portrait)"

для каждой строки.

Answer 2

Я использую это, и это работает отлично:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=1">
<link href="/cssL.css" rel="stylesheet" type="text/css" media="(min-width:1000px)" />
<link href="/cssM.css" rel="stylesheet" type="text/css" media="(min-width:551px) and (max-width:999px)"  />
<link href="/cssS.css" rel="stylesheet" type="text/css" media="(max-width:550px)" />

Вы использовали точку с запятой вместо запятой в мета области просмотра, возможно, это вызвало проблему.