KB Article 10436
2014/04/21

Close
X
Contact Tech Support

 Email Tech Support
 (250) 655-1766
 [7:30 - 5:00 PST]
Your Meeting ID will be Provided by a Rep.
Tech Support
Tech Support Home
Software Updates
Knowledge Base Search
Recent KB Articles
Product FAQs
Code Samples
Documentation
Tech Blog
System Requirements
Installation Instructions
Support Testimonials
Contact us to...
Create a Ticket
Request a Free Demo
Suggest a New Feature
Submit Feedback
Upload a Large File
Other Services
Software Training
Professional Services

Common media query break points for mobile devices

Product: WebSmart ILE Type: Frequently Asked Question

jQuery Mobile's default theme uses media query to selectively show different style depending on which device the user is on. This is mostly detected by the the size of the screen. jQuery Mobile is designed "phone-first" so by default, the style is meant to look great on the phone. It then uses "breakpoints" which is a hard-coded value of screen size where different styles should be applied.

The first break point is for any non-phone device. This, it uses

/* Not Mobile Device */
@media all and (min-width: 28em) {}

Then for tablet, it uses

/* Tablet */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {}

That's the equivalent of 48em and 64em roughly which is recommended over pixel unit.

There are also other arbitary breakpoints it uses to change some styling such as width and margin to ensure the page is scaling to the closest best screen size.


/* Responsive Design: ui-responsive class */
@media screen and (min-width: 20em) {}
@media screen and (min-width: 30em) {}
@media screen and (min-width: 40em) {}
@media screen and (min-width: 50em) {}
@media screen and (min-width: 60em) {}
@media screen and (min-width: 70em) {}

Devices' screen dimension

If you are only planning to support just a handful of devices, you might not want to spend effort on implementing and testing various breakpoints like jQuery Mobile does. Simply look up the device spec sheet to get an idea of what its screensize is then use both as breakpoints. One for landscape, and another for portrait mode. Here are some of the popular devices' screen-sizes.

iPad Retina
2048px x 1536px or 128em x 96em
iPad Mini
1024px x 768px or 64em x 48em
iPhone 5
1136px x 640px or 71em x 40em
Nexus 4
1280px x 768px or 80em x 48em
Nexus 7
1280px x 800px or 80em x 50em
Nexus 10
2560px x 1600px or 160em x 100em

Rate This Article

Did this example help you to achieve your goal?
 Yes  No  Don't Know

Enter additional comments below.   If you want to hear back from us, include your contact information.

Email Address:
Comments:
Please enable JavaScript in order to rate this page.