Не могу заставить работать вёрстку на айфонах так, как требуется.
На всех остальных девайсах всё работает как мне нужно.
Пробовал разные варианты, некоторые из них:
@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