Точка останова Foundation4 для мобильных устройств не обнаружена для устройств с высокой плотностью

В частности, при тестировании моего сайта на Samsung Galaxy SIII я вижу стили, определенные для рабочего стола.

Как вы заставляете телефон использовать мобильные стили (с учетом ширины 320 пикселей) или использовать класс «скрыть для малого» и т. Д.?

В настоящее время на этом телефоне (и я полагаю, что устройства с дисплеем Retina тоже) вы не увидите применение .hide-for-small или global css, только медиа-запросы для больших (768px и выше) окон просмотра.

Есть ли у кого-нибудь опыт работы с устройствами с высоким DPI, то есть (-webkit-min-device-pixel-ratio: 2) с Foundation4?


person Rick Jones    schedule 31.08.2013    source источник


Ответы (1)


Вы не забыли включить метатег Viewport? Область просмотра S3 составляет 360x604., поэтому, если вы видите стили для медиа-запросов, превышающие 360 градусов в портретной ориентации, скорее всего, у вас неправильно настроена область просмотра. Я бы рекомендовал следующий тег окна просмотра и директиву @viewport (в вашем CSS):

<meta name="viewport" content="initial-scale=1.0">

@viewport { zoom: 1; }

Также взгляните на этот связанный вопрос в метатеге окна просмотра на С3.

person Snugug    schedule 31.08.2013