Ориентация на iPhone независимо от устройств Android с помощью медиа-запросов CSS

Есть ли способ настроить таргетинг на iPhone независимо от устройств Android и наоборот с помощью медиа-запросов CSS. Это для электронной почты в формате HTML.

Мы пробовали несколько методов, но все они, похоже, пересекаются.

Мы хотим ограничить размеры таблиц на устройствах с максимальной шириной устройства 480, но только для устройств на базе Android.

Ниже то, что я пробовал совсем недавно. iPhone (тестирование в Litmus) игнорирует второй медиа-запрос и сохраняет ширину 300 пикселей.

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 320px) {
/* Styles */
      table[class="table"], td[class="cell"] {

width: 300px;

}
}


/* iPhone 4 ----------- */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
      table[class="table"], td[class="cell"] {

width: 100%;

}
}

person jsuissa    schedule 25.09.2012    source источник
comment
Я думал, что большинство почтовых клиентов убрали теги стиля? Разве это не верно для почтовых приложений iOS и Android? Если так то круто.   -  person digidigo    schedule 28.09.2012
comment
У вас есть какое-то решение, наконец? Я тоже сталкиваюсь с такой же ситуацией.   -  person sooon    schedule 06.10.2015


Ответы (1)


попробуйте -webkit-min-device-pixel-ratio и min-device-pixel-ratio

 /* iPhone 4 ----------- */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {

см. http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

person luko    schedule 25.09.2012
comment
Это хорошо работает для таргетинга на iPhone, но проблема, с которой я столкнулся, заключается в том, что я могу настраивать таргетинг на устройства Android отдельно, поэтому я могу изменить ширину в зависимости от устройства. Я не могу отделить одно от другого. - person jsuissa; 26.09.2012
comment
Что бы вы сделали, чтобы нацелить iPhone 2-3 вместе с 4? у них соотношение пикселей равно 1, верно? - person carlosvini; 19.11.2013