Медиа-запросы CSS3 не работают в Safari на iPod/iPhone

Я разрабатываю сайт с адаптивным дизайном. Веб-сайт будет оптимизирован для iPhone и iPod (оба имеют ширину 640 пикселей).

Я использую следующие медиа-запросы CSS3:

    @media screen and (max-width: 640px) {
        .display-none-mobile{
            display: none;
        }
    }
    @media screen and (min-width: 641px) {
        .display-none-desktop{
            display: none;
        }
    }

Приведенный выше код отлично работает в моих браузерах для настольных компьютеров, когда я уменьшаю ширину браузера до 640 пикселей. Однако код не работает, когда я пытаюсь протестировать веб-сайт на iPod с помощью браузера Safari.

Я изменил медиа-запросы CSS3 на

    @media screen and (max-device-width: 640px) {
        .display-none-mobile{
            display: none;
        }
    }
    @media screen and (min-device-width: 641px) {
        .display-none-desktop{
            display: none;
        }
    }

Теперь адаптивный дизайн работал для Safari на iPod, но мешал макетам во всех других настольных браузерах. Эти медиа-запросы css3 полностью игнорировались oChrome, IE, FF на моем рабочем столе (для ширины 640 пикселей).

Итак, к настоящему времени я понял, что есть что-то, связанное с кросс-браузерной совместимостью с медиа-запросами css3, но не смог найти много информации об этом. Какими способами я могу обновить свой код, чтобы медиа-запросы css3 работали во всех браузерах (или, по крайней мере, в основных). я ориентируюсь по крайней мере

1. IE Windows
2. Сафари Windows
3. Хром Windows
4. Фаерфокс Windows
5. Сафари айпод
6. Хромированный iPod