Отзывчивые веб-тестеры - PullRequest
Новая
       36

Отзывчивые веб-тестеры

1 голос
/ 19 марта 2012

Я пытаюсь создать сайт с совместимостью с iphone / android / ipad, но у меня нет этих устройств.Я попытался использовать Responsinator , но заметил, что он даже не отвечает на мои медиа-запросы iphone, такие как: 

/* iphone */
@media only screen and (max-device-width: 480px) {
    #wrapper { background-color: red; }
}

Фон для #wrapper не отображался красным на Responsinator Просмотрщик iphone, но на настоящем iphone это так.Есть ли какие-нибудь хорошие бесплатные сайты или приложения, которые будут отвечать на запросы css media, чтобы я мог разрабатывать для этих устройств без необходимости владеть ими всеми?

Спасибо

1 Ответ

3 голосов
/ 19 марта 2012

Я думаю, что причина, по которой они не используются в "обычных" браузерах, заключается в том, что вы используете max-device-width.Если вместо этого вы используете max-width, они будут работать «везде» (не IE).

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

Лично я использую этот код: 

/* Default */

/* Little larger screen */
@media only screen and (min-width: 480px) {

}

/* Pads and larger phones */
@media only screen and (min-width: 600px) {

}

/* Larger pads */
@media only screen and (min-width: 768px) {

}

/* Horizontal pads and laptops */
@media only screen and (min-width: 992px) {

}

/* Really large screens */
@media only screen and (min-width: 1382px) {

}

/* 2X size (iPhone 4 etc) */
@media only screen and 
        (-webkit-min-device-pixel-ratio: 1.5), only screen and 
        (-o-min-device-pixel-ratio: 3/2), only screen and 
        (min-device-pixel-ratio: 1.5) {

}

От: http://stuffandnonsense.co.uk/projects/320andup/

...