Медиа запросы для iPhone

#css #ios #iphone #media_queries

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

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

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

@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

iPhone на данный момент, скриншот одинаков для iPhone6,6+,5,5S

    

Ответы

Ответ 1

У вас слишком жесткие критерии для 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