Responsively-app: CSS Media Query is being ignored

[johndavemanuel]

Great tool, but when I try it the CSS media query is not showing but on "real" browsers it is showing

@media only screen and (device-height: 1024px) and (device-width: 768px) and (orientation: portrait) {
}

Is it related to orientation: portrait ?
Is this known issue?

[manojVivek]

@johndavemanuel @gilesbain The problem here is because you used device-height and device-width media queries instead of just height and width queries.
Is there a specific reason why you are using device-width and device-height?

Your app will work fine, universally, if you have used width and height as a media query.

width and height here refer to the browser viewport's height and width instead of the screen's height and width. Using the selector for browser viewport is the ideal approach.

You can also check this answer, it is a general best practice to use width instead of device-width unless you have a special reason for it - https://stackoverflow.com/a/15276588/586836

[johndavemanuel]

@manojVivek thanks for the input. I don't usually use device-width and device-height, I just test a site that was passed to me. I just thought it is a bug since it was not rendered on the app.

[manojVivek]

@johndavemanuel That is great. I'm going to close this issue now, please feel free to open an new one if you face any problems in the future.