Media queries don't work on iPhone X


#1

Hello guys,

I’m trying to use media queries to change styles on iPhone X.

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { 
   #divname {
   padding: 0px 20px 20px 0px;
}
}

This simply don’t change anything…
Have you guys tried this? what should I do to change the styles on iPhone X?
ionic UI don’t seem to fit very well on iPhone X. Ionic UI works well on all other iOS devices.


#2

I need a few CSS styles applied just on iPhone X which is Apple’ largest phone ever.
Everything looks fine on iPhone SE, 5s, 6, 7. iPhone X screen needs extra UI adjustments.


#3

I don’t know what you mean by media queries but your criticism of ionic iPhone X compatibility is totally wrong.

Ionic apps look great on iPhone X with viewport fit set correctly and it seems like you are blaming Ionic for problems in your personal code, which isn’t fair and gives people who read this post the wrong impression about support for the iPhone X.


#4

maybe min-device-width instead of device-width and min-device-height instead of device-height?

I think you could even check min and max maybe

like

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

but not sure


#5

I’m talking about mode=“md” on iPhone X. Have you tried it?
It has many problems… menu toggle button doesn’t align with title text on navigation. of course you can adjust it by using position: relative; top or bottom.
I need to use media queries to adjust that on iPhone X but media queries don’t work.

Also md mode’s navigation looks too big on iPhone X.

I found the iPhone X media queries here:

Nothing works and I have no idea why.

@reedrichards Thanks, I tried and it didn’t work. Is there any other solution than this?


#6

This is probably a silly question, but why aren’t you using “ios” mode?


#7

I’m using combination of ios mode and md mode. (this works!)
I found this problem while using md mode navigation.
RIght now, everything works well on other iOS devices like iPhone 6, 7. iPhone X needs special media queries set up but for some reasons media queries don’t do anything for iPhone X screen.


#8

Not sure, I think that’s actually what I do to detect iPhoneX. Have you check with the Chrome debugger to see if the property is applied and also if the property is not override? Maybe there is another media query or css style (! important) which is applied and that’s why it would not work?


#9

I’ve tried !Important but nothing happens. I will see what’s going in debugger.
I’m using iOS simulator to see changes… unfortunately ionic lab doesn’t have iPhone X style preview.
I hope Ionic team will include iPhone X preview in Ionic lab soon.
New smartphones are now coming with this style. Check Asus Zenfone 5, LG Thinq Q7, Ulefone X, iPhone SE 2


#10

Not sure you understand what I meant, maybe there is somewhere in your css code other ! important or style rules which are stronger than what the one you are setting and therefore not applied…but yes most probably if you tried important…

Have you also try to change the color to red? Sometimes when I’m stuck I set the color or background-color to red because I want to be sure that my css query is wrong not my actual css attributes (never know, sometimes typings mistake…)

Sorry got no other idea :frowning:


#11

In my case I needed to make this work with (orientation: landscape). The solution to me was change the media query as this:

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

Please note that invert the width by the height was necessary to my case.