CSS медиа-запрос для iPhone XR не работает?

Question

Я работаю над гибридным мобильным приложением, использующим Phonegap.

И все отлично работает, кроме одной проблемы, которая существует только на iPhone XR.

Проблема не существуетна iPhone X или iPhone XS и т. д.

По сути, мой медиазапрос CSS не работает (он ничего не делает) на iPhone XR.

Это то, что я использую для iPhone XR :

/* iPhone XR */
@media only screen 
    and (min-device-width: 414px) 
    and (min-device-height: 896px) 
    and (-webkit-device-pixel-ratio: 2) 
    and (orientation: portrait) { 
    /* my styles goes here */



}

Есть что-то, чего мне не хватает, и почему этот медиа-запрос ничего не делает на iphone xr?

Может кто-нибудь пожалуйстасовет по этому вопросу?

Заранее спасибо.

РЕДАКТИРОВАТЬ:

Следующий мультимедийный запрос CSS отлично работает на макс. Iphone x и iphone xs:

    /* iphone x */
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) {


}

Answer 1

Это сработало для меня

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 2) {}

Answer 2

В зависимости от размера экрана iPhone XR:

Правильный медиазапрос для iPhone XR:

@media only screen 
and (device-width : 375px) 
and (device-height : 812px) 
and (-webkit-device-pixel-ratio : 2) {}