Мультимедийные запросы конфликтуют на разных устройствах

У меня есть 3 медиа-запроса на моем сайте, проблема, с которой я столкнулся, заключается в том, что -webkit-min-device-pixel-ratio one для iphone конфликтует на устройствах Android, и экран не разрешается правильно на Android, если я возьму этот mq сайт отображается правильно, но на iphone 4 это не так и работает с шириной 320 пикселей.

Есть ли способ заставить только устройство iphone 4 / 4s просматривать медиа-запрос -webkit-min-device-pixel-ratio: 1.5?

Ниже приведены мои медиа-запросы:

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


            /*Main*/
            div#container {
                width: 480px;
            }
    }

/*Other mobile phones*/
        @media screen and (max-width: 767px) {

          div#container {width: 480px;}
        }

/*Tablets*/   
        @media only screen and (max-width: 1023px) and (min-width: 768px) {
         div#container {width: 768px;}

        }

iphone css media-queries
person davey    schedule 31.07.2012    source источник
comment
Вся стратегия требует пересмотра. Ваш первый медиа-запрос также будет нацелен на iPad 3.   -  person Jezen Thomas    schedule 31.07.2012
comment
Можете ли вы предложить лучшую стратегию? Благодарность   -  person davey    schedule 31.07.2012
comment
Почему бы вам просто не использовать ширину для первого правила, а не соотношение пикселей. Т.е. если max-width ‹480 пикселей, чем ширина контейнера = 320 пикселей? Это кажется более совместимым с остальной частью вашего подхода.   -  person Mike Brant    schedule 31.07.2012
comment
Я мог бы это сделать, но для этого нужно создать еще один медиа-запрос и не использовать экран сетчатки iPhone.   -  person davey    schedule 31.07.2012

Ответы (1)


arrow_upward
1
arrow_downward

Насколько велик, по вашему мнению, iPhone 4 (в пикселях) и каково его значение в масштабе? Читая ваши правила, я чувствую, что вы пытаетесь сказать: «Если это большой телефон, сделайте его шириной 480. Если это меньший телефон, это сетчатка, сделайте его шириной 480, в противном случае - 768».

но на самом деле iphone4 имеет ширину 320 пикселей с масштабом 2, поэтому вам нужно сделать свой контейнер шириной 320 пикселей, а затем сделать что-нибудь с background-size:contain для изображений

Однако, игнорируя это ... эта страница:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Media2</title>
<style>
body, html {margin:0;padding:0;height:100%;width:100%; background-color:#000000;}
#block {background-size:contain; background-image:url('http://www.robotwoods.com/images/blog/640_300px.png'); display:block; width:320px; height:150px; }
@media (max-width: 767px) { body {background-color:#0000FF;} }
@media (max-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) { body {background-color:#00FF00;} }
@media (min-width: 768px) { body {background-color:#FF0000;} }
</style>
</head>
<body>
<div id="block"></div>
</body>
</html>

Появляется:

  • синий в iPod touch
  • синий в Android Nexus S
  • синий в Blackberry Bold
  • зеленый в iPhone4
  • красный в айпаде

вы можете перейти на http://www.robotwoods.com/dev/misc/so_media2.html, если у вас есть другие устройства для тестирования. И я разместил небольшую запись о медиа-запросах здесь: http://blog.robotwoods.com/2012/08/media-queries/, но не особо разбирались в соотношении пикселей

person Robot Woods    schedule 02.08.2012
comment
Спасибо за информативный пост. Я выбрал ширину 480 пикселей, а затем использовал разрешение 1,5, чтобы довести до 640, что является шириной в пикселях дисплея Retina на iphone. Вместо удвоения с 320 пикселей четкость лучше при увеличении на 1,5 пикселя. Но соотношение пикселей mq, похоже, мешает работе телефона Android, когда я смотрю на сайт с заметкой о галактике. Вы знаете, почему это могло произойти? если я уберу соотношение пикселей mq, телефон правильно получит mq 767 пикселей, поскольку ширина экрана составляет 900 пикселей. - person davey; 02.08.2012
comment
Я думаю, вы неправильно понимаете соотношение пикселей. Это то, что есть, это не касается изменения размеров. Iphone4 имеет ширину 320 пикселей с соотношением 2, поэтому, если вы предоставите изображение 640 пикселей, все они будут использоваться. И, поскольку это не настройка, если у Galaxy Note соотношение 1, этот медиа-запрос не будет применяться, потому что он используется только на устройствах с более высоким коэффициентом, имеет смысл? - person Robot Woods; 02.08.2012
comment
Если вы предоставите изображение шириной 640 пикселей, оно исчезнет с экрана, если вы не используете соотношение пикселей для увеличения экрана вдвое. Примечание о галактике имеет соотношение 1, но по какой-то причине в нем используется соотношение пикселей mq, что делает изображение крошечным, когда следует использовать медиа-запрос 767 пикселей. - person davey; 02.08.2012
comment
для этого изображения установите размер 320 пикселей (даже если он 640), и он будет там в высоком разрешении (или, если вы используете CSS, установите background-size: contain) - person Robot Woods; 03.08.2012
comment
о, на самом деле, я только что заметил кое-что в вашей последней заметке: вы говорите, что это делает изображение крошечным ... это произойдет, если область просмотра больше, чем вы ожидаете (вы устанавливаете свою?), посмотрите эту страницу: developer.apple.com/library/safari / # documentation / - person Robot Woods; 03.08.2012