CSS (@media) не работает в WebView

Итак, у меня есть веб-просмотр, который загружает онлайн-приложение webapp. Проблема заключается в правилах CSS @media, которые установлены для того, чтобы они реагировали. Похоже, что при использовании веб-представления они игнорируются или загруженный веб-сервер неправильно определяет размер экрана устройства.CSS (@media) не работает в WebView

Дело в том, что при загрузке webapp через браузер Android, а не через WebView, отлично работает, правильно загружая CSS.

Здесь это CSS. Я знаю, что некоторые @ media's комментируются.

/* Portrait and Landscape */ 
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { 
.login-form { 
    width: 90%; 
    padding-top: 5%; 
    margin: 0px auto; 
    text-shadow: none;} 

div.col-md-6.text-left, div.col-md-6.text-right { 
     text-align: center; 
} 
} 

/* Portrait 
@media only screen and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: portrait) { 
} */ 

/* Landscape 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: landscape) { 

} */ 

/* ----------- iPhone 5 and 5S ----------- */ 

/* Portrait and Landscape */ 
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) { 
.login-form { 
    width: 90%; 
    padding-top: 5%; 
    margin: 0px auto; 
    text-shadow: none;} 

    div.col-md-6.text-left, div.col-md-6.text-right { 
     text-align: center; 
} 
} 

/* Portrait 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 568px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: portrait) { 
} */ 

/* Landscape 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 568px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: landscape) { 

} */ 

/* ----------- iPhone 6 ----------- */ 

/* Portrait and Landscape */ 
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) { 
.login-form { 
    width: 90%; 
    padding-top: 15%; 
    margin: 0px auto; 
    text-shadow: none;} 

    div.col-md-6.text-left, div.col-md-6.text-right { 
     text-align: center; 
} 
} 

/* Portrait 
@media only screen and (min-device-width: 375px) 
and (max-device-width: 667px) 
and (-webkit-min-device-pixel-ratio: 2) 
and (orientation: portrait) { 
} */ 

/* Landscape 
@media only screen and (min-device-width: 375px) 
and (max-device-width: 667px) 
and (-webkit-min-device-pixel-ratio: 2) 
and (orientation: landscape) { 
} */ 

/* ----------- iPhone 6+ ----------- */ 

/* Portrait and Landscape */ 
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) { 
.login-form { 
    width: 90%; 
    padding-top: 20%; 
    margin: 0px auto; 
    text-shadow: none;} 

    div.col-md-6.text-left, div.col-md-6.text-right { 
     text-align: center; 
} 
} 

/* Portrait 
@media only screen 
    and (min-device-width: 414px) 
    and (max-device-width: 736px) 
    and (-webkit-min-device-pixel-ratio: 3) 
    and (orientation: portrait) { 

} */ 

/* Landscape 
@media only screen 
    and (min-device-width: 414px) 
    and (max-device-width: 736px) 
    and (-webkit-min-device-pixel-ratio: 3) 
    and (orientation: landscape) { 
} */ 

/* General Landscape*/ 
@media (min-device-width: 415px) and (min-device-height: 737px) { 
.login-form { 
    width: 360px; 
    padding-top: 100px; 
    margin: 0px auto; 
    text-shadow: none;} 

} 
} 

/* General Small */ 
@media (min-device-width: 415px) and (min-device-height: 580px) { 
.login-form { 
    width: 360px; 
    padding-top: 35px; 
    margin: 0px auto; 
    text-shadow: none;} 

} 
} 

/* General Full HD */ 
@media (min-device-width: 1920px) and (min-device-height: 1080px) { 
.login-form { 
    width: 20%; 
    padding-top: 7%; 
    margin: 0px auto; 
    text-shadow: none;} 
} 

/* General Extreme */ 
@media (min-device-width: 1921px) and (min-device-height: 1081px) { 
.login-form { 
    width: 360px; 
    padding-top: 12%; 
    margin: 0px auto; 
    text-shadow: none;} 
}

источник

2015-09-10 Alejandro Fernández

Вы уверены, что с вашим -webkit-min-device-pixel-ratio: 2? Кажется странным для меня, я думаю, что правильные значения будут 0,75, 1,0 или 1,5! – Wolfgang

Вы проверили, что вы использовали правильный метатег для окна просмотра. Он должен быть в главном теге на вашей странице html.

И специально проверьте, являются ли ваши медиа-запросы конкретными для устройств.

Так что для конкретного устройства просто проверьте, что это: max-device-width. Если это что-то вроде этого, удалите устройство оттуда. А потом бегите.

И дайте мне знать, если что-то другое.

источник

2015-09-10 16:02:14 RealDeepak

Это то, что я использую. Он просто не работает на Android WebView (обычный браузер Android в порядке). В Chrome -> Emulator работает тоже. Он работает и на iPhone. Я отредактировал сообщение, чтобы вы могли увидеть CSS. Я думаю, что это может быть связано с соотношением пикселей, но странно, что это влияет только на WebView, а не на обычный браузер. –

CSS (@media) не работает в WebView

ответ

Смежные вопросы