Я работаю с CSS Media Queries, чтобы загружать разные шаблоны для устройств разного размера. Я создал электронную таблицу, в которой перечислены разрешения экрана тестируемых устройств и наиболее распространенные устройства, в которых указаны ограничения по размеру. Одно из устройств, которые я тестирую, — это Nexus 7, разрешение экрана которого, как я обнаружил, составляет 1280 × 800. Однако, когда я использую эти значения в своем коде, это не работает.
** единственная причина, по которой я не использую максимальное или минимальное значение, заключается в том, что я пытаюсь найти точное разрешение. Если я заменю max-device-width на что-то довольно большое, это сработает, и я провел достаточно тестов, чтобы знать, что он работает с различными заданными максимальными значениями, но для того, чтобы правильно завершить мой код, чтобы различать 3 категории устройств разного размера. , я должен убедиться, что создаю правильные отсечения. Отличается ли разрешение CSS? Заранее спасибо за любую помощь!
@media only screen and (device-width:1280px) and (orientation:landscape) {
/*style --code removed for sack of space */
}
@media only screen and (device-width:800px) and (orientation:portrait) {
/*style --code removed for sack of space */
}
Вот мой код области просмотра в моем html-файле
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">