×
Namespaces

Variants
Actions

Media Query Guide for Nokia X

From Nokia Developer 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
Article
Created: blynn (12 Mar 2014)
Last edited: kiran10182 (14 Mar 2014)

Introduction

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.

Implementation

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) {
body{
margin:0 auto;
width:460px;
}
}

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

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

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" />

Summary

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.
86 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×