mediaQueryMatch

Enjoy millions of the latest Android apps, games, music, movies, TV, books, magazines & more. Anytime, anywhere, across your devices.

Media query match

Ever wanted to see what media queries match your device?

Or wanted to compare the behavior of <meta name="viewport" />'s

This is an app that provides information about the width and height media queries that match your device with either the

<meta name="viewport" content="target-densitydpi=device-dpi" /> set, or with the

<meta name="viewport" content="width=device-width" /> 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.

This app makes no use of JavaScript or other techniques besides CSS to calculate the dimensions of the view, it only uses CSS @media queries.

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

device-dpi 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.