iPad Pro 12.9 Media queries are not working

user_5940289 0
Viewed 521

I'm trying to implement the following media queries for the iPad Pro 12.9 inch version but its not working when I check the actual iPad Device.

@media only screen   and (min-device-width: 1024px)   and (max-device-width: 1366px)   and (orientation: landscape)   and (-webkit-min-device-pixel-ratio: 2)
{
//CSS
}

The media query above work on Chrome but when I check on the actual device or even the simulator on xCode, it doesnt work.I have also tried with (-webkit-min-device-pixel-ratio: 2). Same results

media-queries css
1 Answers

here the working code for iPad Pro 12.9 inches. I struggled a lot for huge lack of information, but I found the working parameters right now.

// For both Portrait and Landscape
@media only screen
    and (min-device-width: 768px)
    and (max-device-width: 2732px)
    and (-webkit-min-device-pixel-ratio: 2){
       // CSS HERE
}

// For landscape
@media only screen
    and (min-device-width: 768px)
    and (max-device-width: 2732px)
    and (orientation:landscape)
    and (-webkit-min-device-pixel-ratio: 2){
       // CSS HERE
}

// For Portrait
@media only screen
    and (min-device-width: 768px)
    and (max-device-width: 2732px)
    and (orientation:portrait)
    and (-webkit-min-device-pixel-ratio: 2){
       // CSS HERE
}
user_29427410
Related