When I rotate my device from LANDSCAPE to PORTRAIT my media query doesn’t work!
The issue is that I see in chrome inspector the media query for LANDSCAPE instead of PORTRAIT. That’s wrong!
There is another strange behavior.
If I close Web Inspector media query are OK! Like a rendering problem of the entire app.
In inspector I see this:
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)
:root {
–breakpoint-active: 768;
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2)
:root {
–breakpoint-active: 768;
}
:root {
–breakpoint-active: 375;
}
Command or Code
My media query:
$breakpoint-mobile: 375;
$breakpoint-tablet: 768;
$tabletRetina : "only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2)";
$tablet : "only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)";
:root {
--breakpoint-active: #{$breakpoint-mobile};
}
@media #{$tabletRetina} {
:root {
--breakpoint-active: #{$breakpoint-tablet};
}
}
@media #{$tablet} {
:root {
--breakpoint-active: #{$breakpoint-tablet};
}
}
Environment, Platform, Device
Env.
"@angular/core": "5.2.11",
"ionic-angular": "^3.9.6",
"@ionic-native/screen-orientation": "^4.12.2",
Platform
Android 10
Device
Samusung Galaxy A40