Мой iPhone считает, что его ширина составляет 980 пикселей.

Я пытаюсь создать набор из трех очень простых медиа-запросов для обработки экрана различных размеров. Вот что я придумал после нескольких головокружений:

@media all and (min-width: 0px) and (max-width: 480px)  { styles here }  
@media all and (min-width: 481px) and (max-width: 1023px)   {  styles here } 
@media all and (min-width: 1024px) {  styles here } 

В браузерах это работает так, как я ожидал, но когда я направляю на него свой iphone, он настаивает на отображении слогов для среднего размера. Играя с числами, я обнаружил, что только с максимальной шириной 980 пикселей iphone реагирует на стили в этом запросе.

Обратите внимание, что я использовал «все» в этих запросах, чтобы исключить какое-либо отношение к тому, нужно ли кодировать «портативный» или «экранный, портативный» и т. Д. Попытка упростить, чтобы помочь мне понять проблему.

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

http://rgdaniel.com/test-mediaquery.php

Если я смотрю на эту страницу в своих браузерах на рабочем столе, она ведет себя так, как ожидалось, когда я увеличиваю и уменьшаю размер окна. Но iPhone сообщает о моем сообщении «среднего разрешения» при любой указанной максимальной ширине менее 980 пикселей. Любая помощь приветствуется, заранее спасибо.