Онлайн-ответные веб-тестеры

Question

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

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

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

Спасибо

Answer 1

Я думаю, что причина, они не забираются в «нормальных» браузерах является то, что вы используете 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/