4

Не могу заставить работать вёрстку на айфонах так, как требуется.

На всех остальных девайсах всё работает как мне нужно.

Пробовал разные варианты, некоторые из них:

@media (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2)

@media
    only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (max-device-height: 640px) and (min-device-height: 560px),
    only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (max-device-width: 640px) and (min-device-width: 560px) {
    /* iPhone only */
}

@media only screen 
    and (max-device-width: 640px), 
    only screen and (max-device-width: 667px), 
    only screen and (max-width: 480px)
{ }

Но ничего не помогло. Сейчас я использую такие media queries(для iPhone они всёравно не работают):

@media screen and (max-width: 420px), only screen and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2), screen and (min-device-width : 414px) and (max-device-height : 736px) and (max-resolution: 401dpi)
    .l-wrapper
        flex-direction: column
        .l-item
            width: 100%

    .projects
        figure.project
            width: 100%
            margin-right: 0

    .edu-places
        .edu-place
            span
                &.period
                    padding-top: 3em

                    &:before
                        top: 3em
    .h-wrapper
        flex-direction: column
        align-items: center

@media screen and (max-width: 768px), only screen and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2), screen and (min-device-width : 414px) and (max-device-height : 736px) and (max-resolution: 401dpi)
    #wrapper
        flex-direction: column

    #header
        flex: 1

    #main
        flex: 1

Подскажите, что ещё попробовать? Может я что-то неверно делаю? Нужна помощь и советы.

UPDATE: На iPhone желаю получить такой же результат как на скриншоте Android Android
iPhone на данный момент, скриншот одинаков для iPhone6,6+,5,5S iPhone

3
  • 1
    первый совет, с вашего позволения: возможно, было бы неплохо, если бы вы добавили в вопрос описание того, чего именно вы ожидаете от кода, и что вместо этого получаете. хотя бы ввиду того, что таковы рекомендации. 23 июл 2015 в 4:19
  • Добавил 2 скриншота, первый, андроид, где всё выглядит как мне нужно, другой iPhone, как видно на картинке, к нему не применяются медиа запросы.
    – vladys.bo
    23 июл 2015 в 11:45
  • Меня гложут сомнения что вы в html забыли viewport задать 12 окт 2016 в 5:25

2 ответа 2

3

У вас слишком жесткие критерии для Media Queries, плюс нет вендорных префиксов для того же определения плотности пикселей. Например вот так:

@media
   only screen and (-webkit-min-device-pixel-ratio: 2),
   only screen and (   min--moz-device-pixel-ratio: 2),
   only screen and (     -o-min-device-pixel-ratio: 2/1),
   only screen and (        min-device-pixel-ratio: 2),
   only screen and (                min-resolution: 192dpi),
   only screen and (                min-resolution: 2dppx) { 
      Ваши свойства
}

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

Посмотреть нужные Media Queries для iPhone можно вот здесь.

И свойство flex из-за своей новизны так же требует вендорных префиксов. В коде у вас этого не вижу.

Здесь можно посмотреть как поддерживается свойство flex.

2

Вот сайтец, где все есть Iphone media query

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.