Мобильный браузер, инициализирующий различную ширину

Question

Итак, ребята, я уже некоторое время работаю над отзывчивым сайтом. У меня теперь отсортирована компоновка, а также содержимое, поэтому я решил добавить точки останова на веб-сайт и, используя медиа-запросы, соответствующим образом отрегулировать элементы. Поэтому я знаю, что точки останова должны быть добавлены на основе того, когда макет начнет разорваться, и не на популярных разрешениях экрана, но когда я протестировал сайт на Android-версию Firefox на моем Moto X (2013), у моего телефона есть разрешение 1280x720 пикселей, но когда я добавляю точку останова, скажем, 700 пикселей, используя запрос min-width, это не влияет на страницу, но когда я меняю тот же запрос на минимальную ширину 980 пикселей, он работает. Теперь мой вопрос: не предполагается ли оно инициировать фактическое разрешение или делать браузеры по-другому? Кстати, я говорю о портретной ориентации.

Answer 1

Разрешения отличается от соотношения сторон, я рекомендовал включить формат изображение в вас медиа запросов для достижения своей цели, увидеть это видео, чтобы понять разницу между соотношением сторон и разрешением

Resolution and Aspect Ratio Explained

Вы можете создать свой медиа-запрос следующим образом:

@media only screen and (device-width: 320px) and (device-height: 768px) and (-webkit-device-pixel-ratio: 2){ 
      .your_css_classes{} 
    }