Отзывчивые веб-тестеры
Я пытаюсь создать сайт с совместимостью iphone / android / ipad, но не обладаю этими устройствами. Я попытался использовать Responsinator, но заметил, что он даже не отвечает на мои медиа-запросы iphone, такие как:
/* iphone */
@media only screen and (max-device-width: 480px) {
#wrapper { background-color: red; }
}
Фон для #wrapper не отображался красным на iphone Viewer Responsinator, но на реальном iphone это так. Есть ли какие-нибудь хорошие бесплатные сайты или приложения, которые будут отвечать на запросы css media, чтобы я мог разрабатывать для этих устройств без необходимости владеть всеми ими?
Спасибо
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) {
}