Я создал свой сайт с html, css и javascript и спроектировал его для iPhone X, чтобы начать. Мой сайт будет ориентирован на Instagram, поэтому мои основные цели - все типы мобильных устройств. Я использую медиазапросы в css и хочу проверить высоту экрана. Я не уверен, но это звучит как хороший подход для меня, потому что, например, iPhone не так сильно отличаются по ширине экрана, как по высоте экрана.
Это мой подход в css :
@media only screen and (min-height: 481px) and (max-height:666px){*css*}
Это должен быть запрос для iPhone 5, но я был очень смущен точками против пикселей, поэтому я надеялся, что некоторые из вас могут мне помочь.
Google chrome показывает мне размер экрана iPhone 5 как 320 x 568. Я предполагал, что это должны быть точки, но он прекрасно работает с моим медиа-запросом, введенным в пикселях, в то время как размер экрана iPhone 5 в пикселях должен быть 640 x 1136 пикселей.
Мой медиа-запрос для iPhone 5 отлично работает в Google Chrome iPhone 5 "setup", но у меня также есть тест iPhone 5 дома, где чувствительность кажется не работает на всех.
Поэтому, прежде чем продолжить мой адаптивный дизайн, я хотел бы иметь это ясно .. Почему это? Google Chrome показывает точки или пиксели? Должен ли я использовать точки или пиксели в моих медиа-запросах? Почему он работает с пикселями в css, когда они совершенно разные, когда я гуглю размеры экрана?
Я бы по-прежнему считал себя новичком, поэтому я был бы очень признателен за не слишком сложные ответы.
Спасибо!