Media query match
Ever wanted to see what media queries match your device?
Or wanted to compare the behavior of 's
This is an app that provides information about the width and height media queries that match your device with either the
set, or with the
set in one of the three default zoom modes Android device provide through the settings.
This is a helpful tool for front-end developers, enthusiasts or anyone that's making websites for mobile Android devices or PhoneGap/Cordova apps or any other app that uses a WebView.
That way you will be absolutely sure that the CSS media query matches a device with specific settings.
Media query match doesn't show device-width and device-height media queries because they will be exactly the same as the width and height media queries on Android browsers and in Android WebViews.
It does show you:
width and height media query values
if orientation is supported and its values
This way it gives you a good idea of what settings are best for your mobile site or Android app (with WebView).
It provides you with the option to hide the title bar through an option in the menu (or by touching the screen for a couple of seconds on devices that support it) and it lets you easily switch between the width=device with media query page or the target-densitydpi=device-dpi page and gives you the option to reset the zoom for that page.
Or you can select a zoom level like the default zoom level options in the browsers settings.
The app now shows 2 pages, "device-width" and "device-dpi" to be able to compare the two in certain zooming levels.
Also both pages are zoomable now and user zoom can be toggled.
Added more widths and height to always show the values and added some more device densities.
The three zooming levels are the ones that can be chosen from the browsers default zoom settings menu.
Removed the no-scale since it is bad practice.