I wrote some CSS code to make an HTML page fit better in mobile browsers. To be sure that my CSS apply only on mobiles, I use to following media query :
#media only screen and (max-device-width: 480px)
As an iPhone developer, I tested on this device and it works really well. But I want my CSS to be use on all kind of devices (Android, Windows Phone, etc).
What would be a good resolution that would fit most of smartphone of these days? Or do I need a more complex media query?
Recently I started to work with Responsive Web Design and Media Queries, I didn't find a unique "magic" query, but after reading a lot of articles and a couple of books, I've adopted the Mobile First way to develop web pages, and I'm using some common Media Queries, here the breakpoints:
320 px Mobile portrait
480 px Mobile landscape
600 px Small tablet
768 px Tablet portrait
1024 px Tablet landscape/Netbook
1280 px & greater — Desktop
(Taken from http://fluidbaselinegrid.com/)
Hope it helps
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).
Related
When breakpoints are set in CSS for responsive web designs, media queries check the width of a device so that different layouts can be appropriately displayed. As I thought I understood it, the pixel units in the media queries were referencing the rendered pixel resolutions that we commonly see in device specs. For example, the iPhone 5 at 640 x 1136px or the Nexus 5 at 1080 x 1920.
But now I’m confused about whether breakpoints are instead meant to reference a device’s points (for iOS) or density-independent pixels (for Android).
This question largely stems from how I’ve often seen common breakpoints referenced, with buckets defined for phones, tablets, and then desktop screens. This, for instance, is from Bootstrap’s documentation:
// Extra small devices (portrait phones, less than 544px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 544px and up)
#media (min-width: 544px) { ... }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
But wait a second. The Samsung Galaxy series has a few phones nowadays whose resolutions are 1440 x 2560. With the breakpoints above, these higher-resolution phones would be treated like desktops, wouldn’t they? Even the iPhone 6 Plus would qualify as a desktop. That can’t be right.
And while I know it’s best practice to define breakpoints based on content and not the device, the Bootstrap example is representative of a seemingly widespread idea that there ought to be breakpoints for portrait phones, landscape phones, tablets, and desktops … but a single bucket for all portrait phones doesn’t make sense if we’re talking about rendered pixels, because there’s so much device size diversity in that category alone!
Finally, I also found this kinda related post, which encourages setting the viewport meta tag so that “the screen's width will match the device independent pixels and will ensure that all the different devices should scale and behave consistently.” (Emphasis is mine.) So to return to the Bootstrap example, even though the unit says px, it could actually be referring to pts or dps?
All of this – plus a parallel investigation of mine into the concept of designing in 1x to 4x for different screen densities – has got me completely spun around on what feels like it ought to be a basic issue. Am I making this out to be more complicated than it is? And dps and pts relevant only to native development and not responsive web design? What units exactly are media query breakpoints referencing?
From the very same post you referenced in your question:
Stack Overflow– “Should I use max-device-width or max-width?”
In terms of media queries, you will probably want to use max-width rather than max-device-width, since max-width will target the viewport (current browser window), whereas max-device-width will target the device's actual full screen size/resolution.
So to answer your question, pixel-based media queries– combined with the correct <meta name=viewport> tag settings –will reference rendered (as opposed to actual) pixels.
I'm practicing with some responsive design basics and one question that a lot of tutorials don't answer explicitly is what minimum width to take into account when targeting mobile devices.
What I've seen most so far is #media only screen and (max-width:480px){...} for smartphones and then #media only screen and (min-width:481px) and (max-width:768px){...} for tablets. And so on.
I think the smallest screens that are used on a (reasonably) regular basis are 320px by 480px. However, the 320px width does not have to be taken into account due to the option of using landscape orientation. Right?
In other words, is it reasonable to assume that I'll always have at least 480px of width for a design? How do others handle this?
The Exact and ideal answer would be 320px.
When it comes to using media queries, I see max-width and max-device-width used a lot to target "small screen" devices, or smartphones, but why not use the media query for resolution?
For example, #media screen and (min-resolution: 230dpi) allows me to write CSS to target some smartphones, such as the Galaxy S Glide SGH I927R, which has 480 x 800 pixels, 4 inches (~233 ppi pixel density)
Conversely, I would have to use #media screen and (max-device-width: 480px) and (orientation: portrait) plus #media screen and (max-device-width: 800px) and (orientation: landscape).
It seems that min-resolution would save me some time. I have read several articles and blogs, but I do not see anyone advocating for resolution.
There must be an obvious point that I am missing - I am not a professional web designer - but what is "wrong" with the approach of using resolution? What makes width or device-width better to target "small screens."
My favorite site so far on width vs device-width has been:
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml
Maybe the reason that I had to use a max-device-width of 800px, which seemed "excessive" for smartphones to me is because I did not use the meta tag viewport. I read in the article above on page 3 the following:
"It means that our CSS media queries will match the dimensions of the "zoomed out" device's, and not its actual (ie: 980px for device-width on the iPhone instead of 320px). So whenever you're optimizing a webpage for mobile devices, the first step is to define a particular META tag on your page to alter/ disable the "zoom in" behaviour of mobile browsers..."
Perhaps after defining the viewport, the max-device-width would make more sense than using Resolution in the media queries?
Chris Coyier with CSS-Tricks.com and Jamie Bicknell of Rentedsmile Web Design put together a great article on the CSS-Tricks website.
I will summarize their main points and post a link to the article at the bottom.
The most popular analytics software in the world is Google Analytics which is why most of us are so concerned about resolution. Unfortunately this does not account for browser window size which is the only item to account for when many of us are using 27" screens, multiple screens, 40+ devices, and frankly, what percentage of people ever use the full window? I know I don't.
Chris Coyier points out only ~61% of users view within 200px of full screen meaning if you are 'pixel-perfect' then in the eyes of your consumer -- you are not. Your website will most likely be broken. (An estimated 0.85% using full screen)
This means screen resolution is totally irrelevant to the cause which are our end-users.
See the full article here for their complete breakdown and illustration-rich analysis
http://css-tricks.com/screen-resolution-notequalto-browser-window/
I've built a nice template that has four different layouts using #media queries:
850+px width
<850px width
iphone landscape
iphone portrait
It works awesome, until you size your monitor window down to below 480px (iphone landscape) and then it starts picking up the smaller size #media queries.
Is there any way to avoid this?
I personally feel like it's desirable to display the "iPhone" layout at smaller browser window sizes, as your content has likely been optimized for that layout, HOWEVER, if you really want to prevent this you can play around with the device-width property in your #media declaration. Something like #media only screen and (max-device-width: 720px) { ... } will target device width rather than viewport width. Compare the behavior of this (viewport width) vs this (device width). Play around with the values (change min to max, change the pixel sizes, etc.) and observe the behavior. Also, don't forget that you can combine #media rules, e.g. #media (min-width: 400px) and (max-width: 600px) { ... }. See what works for you.
The problem with this method is that mobile devices come in all shapes and sizes, so you might be serving undesirable styles on a different mobile device (let's just say an Android phone...) that you hadn't planned on. However, depending on your needs, this might not matter to you.
Here is a list of example media queries and sizes to guide you, if you do decide to go this route: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ (sorry for the lack of a working link; apparently I'm not cool enough on StackOverflow to post multiple links yet)...
Will the following media queries behave exactly same on mobile devices and computers or there's any difference?
#media only screen and (max-width: 480px),
screen and (max-device-width: 480px){
...
}
and
#media (max-width: 480px) {
..
}
No, they will not. This is because device-width is not the same as width. If your media query has just width they'll behave the same, but when you introduce device-width you'll get different results. Refer to my response to this question for more info: CSS stylesheet that targets iPhone iPad not working
Media Queries themselves will behave the same. But when they query different things, they're likely to get different answers.
"only screen" usually works, but a small number of mobile devices classify themselves as 'handheld' rather than 'screen'. (My personal inclination is "only all" is better, partly because it includes handheld and partly because it provides the same CSS to print and presentation [i.e. projectors] too.)
For a first approximation, min/max-width is the logical current window (which may have been set by the user), while min/max-device-width is the physical screen. But many mobile devices will not return what you read in their sales specs for screen size. Many of them include a concept of a "viewport" ...something you can modify (with <meta name="viewport" content="...), but which usually defaults to something much larger than the actual screen dimensions. Thoroughly understanding the "viewport" will clarify (and possibly answer too) your query.
Also since mobile devices are often viewed at a much closer distance, they need much denser pixels in order to provide an equivalent user experience. (The iPad's "retina" display exemplifies the trend.) As a result of the very high pixel density, small physical dimensions can have notably large pixel dimensions anyway. (My own inclination is to think you'll ultimately have to take density into account in your Media Queries in order to produce really sensible results.)
In any case, for an alternative to Media Queries that keeps the concept but implements it rather differently, you might want to look at http://www.ckollars.org/alternative-to-media-queries.html