Media Query to Target Most of Smartphone

Media query to target most of smartphone

Updated: Mars 2016

Projects are all different, so it's hard to set a global rule that will fit them all. If you're looking for one, here's an example that someone smarter than me came up with and that I've used before:

xsmall:     (max-width: 479px),
small:      (max-width: 599px),
medium:     (max-width: 767px),
large:      (max-width: 1024px),
largeOnly:  (min-width: 768px) and (max-width: 1024px),
xxl:        (min-width: 1200px),
tall:       (min-height: 780px),

Note the lack of references to devices, screen sizes or orientation on their names. The size of a 'tablet portrait' shouldn't really matter to us as we should try to make things responsive and look good on any screen size, not simply adaptive to a few screen sizes.

Yes, it's important to know the most common screen sizes and avoid crazy media queries, but in the end, your design may start to beg for adjustments at 530px instead of 480px or something like that. So why not?

Now, on my personal preferences: I keep media queries in mind all the time, but at first I tend to ignore device sizes almost completely. I also prefer the desktop-first approach cause I find it easier to adjust layouts to smaller sizes (ie.: removing not so important things from the page, reducing sizes, etc.).

Original Answer

Some people tend to ignore device sizes completely. They say you should check where your layout starts to break and create media queries only when necessary. Others will check for different device sizes, as you're doing now. But then you'll have a media query for 320px, another for 480px, and so on... You may go crazy with that, and maybe it's not even necessary depending on your layout!

So, for now I'm trying to do both. I tend to ignore device sizes at first and will create some media queries only when necessary (when layout breaks), until it looks good for sizes like 960px and bigger, and also for smaller screen sizes, like 320px (the smallest device size I care about).

Media Queries: How to target desktop, tablet, and mobile?

IMO these are the best breakpoints:

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Edit: Refined to work better with 960 grids:

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

In practice, many designers convert pixels to ems, largely because ems afford better zooming. At standard zoom 1em === 16px, multiply pixels by 1em/16px to get ems. For example, 320px === 20em.

In response to the comment, min-width is standard in "mobile-first" design, wherein you start by designing for your smallest screens, and then add ever-increasing media queries, working your way onto larger and larger screens.

Regardless of whether you prefer min-, max-, or combinations thereof, be cognizant of the order of your rules, keeping in mind that if multiple rules match the same element, the later rules will override the earlier rules.

Media Query to Target ONLY Mobile

Found the solution: https://stackoverflow.com/a/18500871/5906166

You need to include this in your header:

<meta name="viewport" content="width=device-width, initial-scale=1">

Explanation:

Fortunately, you can specify a viewport meta tag in the <head> section
of your document in order to control the width and scaling of the
browser's viewport. If this tag has a content value of
width=device-width, the screen's width will match the device
independent pixels and will ensure that all the different devices
should scale and behave consistently.

How to target small phones 3 inch or lesser with media query

Most of the resolution will fall within 320px

So you have to changes min to below code

@media screen and (max-width: 320px){
/*YOUR CODE */
}

Most recommended CSS Media Query for Mobile Phones and Tablet Devices

This Will be helpfull...

 @media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
    @media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
    @media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
    @media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
    @media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
    @media (min-width:1281px) { /* hi-res laptops and desktops */ }

CSS Media Query that Covers Most Mobile Devices

I think you might be approaching this from the wrong angle. When doing responsive design you shouldn't be concerned with specific screen sizes of different devices, you'd go mad trying to code for all the exceptions.

Just concern yourself with the layout of your page at various pixels widths. If the design looks good at 320px, bump it up a bit. How does it look at 480px? 640px? Are a couple DIVs not flowing properly? Is the heading font size way too big/small? Images need re-sizing? At these points is where you would insert a media query to adjust the layout and design of your page.

As far as supplying a different stylesheet for mobile devices you would, and correct me if I'm wrong, have to sniff the UserAgent string and send the appropriate CSS file. This could be done from the server or client side. From my understanding this not ideal as you cannot rely too heavily on what will be contained in the UserAgent string as it changes over time. Using this method might get you a layout that was meant to be shown on a sub 480px width screen but appear on a larger tablet where you might actually prefer the desktop layout to be used or a layout designed for use in the 480px to 960px range.

You could look into Adaptive Design, though this does not sound like what you're doing. In Adaptive Design you might detect the device (width/type/etc) the user is on and send them a different web page all together. Not the same page with the layout re-tooled. A major airline does this (cannot remember who, KLM?) for their mobile users. They found that a large majority of their users weren't purchasing tickets when accessing their website via mobile rather they were managing their upcoming/current flights - check-in, flight status etc. So they deliver a webpage that focuses on those features and information and their desktop site is more geared towards sales.

As far as high definition screens go there is a difference between device pixels and CSS pixels (aka Device Independent Pixels?). eg, my Samsung Galaxy S4 has 1080x1920 device pixels, though it's CSS pixels is 360x640. CSS pixels is what the browser on a mobile device will use to render the page. Though that will depend on what you set in your viewport meta tag. Here's a link on how some of what I just mentioned works - https://developers.google.com/speed/docs/insights/ConfigureViewport. There's also this handy little site to help you determine the various pixel settings, their ratios etc. - http://mydevice.io/.

---

Related Topics