Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Media Query Guide for Nokia X

From Wiki
Jump to: navigation, search

This article explains how to use CSS media queries to create adaptive user interfaces for Nokia X devices.

Note.pngNote: This is an entry in the Nokia X Wiki Challenge 2014Q1

Article Metadata
Tested with
Devices(s): Nokia X
Created: blynn (12 Mar 2014)
Last edited: kiran10182 (14 Mar 2014)


CSS media queries can be used to tailor the presentation of content to specific devices and screen sizes. This article explains how to use CSS media queries with Nokia X devices.

Having more than one media query can be helpful in targeting a tablet layout, or a desktop layout. Consider your mobile layouts first and then consider how the app would look when scaled up.

Images scale nicely most of the time, but they tend to lose quality. Text and svg graphics will not lose quality, as they scale, so consider using these as they improve performance and quality. Also image based fonts load quickly and doesn't compromise quality.


The default screen size for the Nokia X is 480x800 pixels.

Therefore, your first Media Query break point should be defined as follows:

 @media (max-width: 480px) {
margin:0 auto;

If you want your app so have a horizontal look, consider targeting your app this way:

 @media (max-width: 800px) {
margin:0 auto;

You should consider leaving a 10 pixel gap between your application and the edge of the screen so users can easily read the text on the screen.

Also, setting up a meta tag with some screen size adjustments helps format your page to the screen size. You can do this as follows:

 <meta name="viewport" content="width=device-width,user-scalable=yes" />


This article explains how to use CSS media queries to create adaptive user interfaces for Nokia X devices.

If you're looking for an example of how this is implemented, check our app Animal Match on the Nokia X platform. The App scales nicely to the window size of just about any device, as I set up various screen sizes.

This page was last modified on 14 March 2014, at 07:51.
132 page views in the last 30 days.