Различные страницы на разных устройствах

Question

Я создаю отзывчивую веб-страницу. У меня разные схемы разной ширины. Один для устройств шириной более 816 пикселей. Второй - от 640 до 816. Самый маленький - для устройств размером 640 пикселей.

Если я установил свое окно браузера на ПК (Firefox, Chrome, в зависимости от того, какой браузер) на любую из этих ширины, он будет масштабироваться правильно и отобразить правильный макет. Если я просмотрю его на планшете Android (Asus Transformer Prime) или iPad, он также будет отображаться правильно (самый большой макет в ландшафтном режиме и средний размер в портрете).

Если я рассматриваю его на iPhone 5, он всегда показывает самый маленький. В ландшафте он должен показывать средний размер, не так ли?

На любом Android-телефоне он отображается правильно на портрете с наименьшим расположением. Если устройство повернуто к ландшафту, оно не отображает второй самый большой, и он не может правильно отобразить навигацию (он перекрывается с контентом).

Мои медиа запросы являются следующие

@media all and (min-width: 640px) and (max-width: 816px) { ... 
@media all and (max-width: 640px) { ... 

CSS для большого макета определяется непосредственно перед этими двумя.

Что может быть неправильным? Половина устройств показывает страницу правильно, другая - нет.

Answer 1

экран iPhone является 640px так, что он использует меньший, если вы хотите его использовать больше один сделать, как мой пример:

@media all and (min-width: 640px) and (max-width: 816px) { ... 
@media all and (max-width: 639px) { ...