I've been doing some research on this topic and can't find an answer.
When defining your media queries you typically write the following one of two ways:
#media screen and (min-width: 320px) {}
and
#media (min-width: 320px) {}
What I'm interested to learn is what's the reason one would define "screen"? Is this a must have when defining media queries?
Also - what is best / common practice regarding using min-width or max-width?
Google advises to NOT use the min-device-widthproperty:
https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en
The "screen" aspect of the media rule is referred to as "media type" and filters contexts in which the styles within the query may be applied.
A media query consists of a media type and zero or more expressions that check for the conditions of particular media features.
The specification does state that the type can be omitted-
if the media type is not explicitly given it is ‘all’.
Therefore, in a strictly technical and "as per the spec" sense, "screen" can be omitted from your media query.
I was once taught that some browsers that do not understand the media query specification have difficulty unless the media type is specified and render all styles regardless. This was about two years ago I am struggling to find any citations and references to it, contemporary or otherwise, so this may not be a worthwhile consideration for you now.
Version 4 of the media queries specification deprecates all specific media queries apart from screen, print and speech (largely as the lines between handheld, tv, screen etc are now extremely blurred at best) and states-
Note: It is expected that all of the media types will also be
deprecated in time, as appropriate media features are defined which
capture their important differences.
As such, unless your testing uncovers problems with legacy browsers and media queries that do not specify a media type - you should be able to safely omit the type in your stylesheets.
It is worth noting though that your examples are not exactly equal. The example-
#media (min-width: 320px) {}
Is exactly equivalent to-
#media all and (min-width: 320px) {}
And not the cited-
#media screen and (min-width: 320px) {}
As 'all' obviously includes 'screen', the rendered effect is the same in your tests, but it is probably useful to understand that these are not equal expressions.
Most notably omitting the type will mean that your styles are applied in print where the remainder of the expression also evaluates to true.
With regard to the advice from Google not to use min-device-width (or indeed I would suggest device-width at all - unless you quite specifically understand what you are doing), this is almost certainly as the width of the device (most often screen) is not always the same as the viewport/window in which your page is being rendered.
This will most often be the case, and can most easily be explained, in the context of a laptop or desktop environment where a user has multiple windows open at the same time for the purposes of multi-tasking or copying data between windows. The non-maximized browser window does not fill the full space of the desktop and thus the window width is not the same size as the width of the device itself as reported by the browser.
Some tablets and televisions are capable of multi-tasking or multiple side-by-side or window-in-window windows, in particular with tablets running Windows 8, so this is not exclusively a problem in "desktop" environments.
If your media query used the 'device-width' as opposed to simply 'width' then no matter how much the user resizes their window or squishes it about - your design will not change and adapt. The size and resolution of the monitor remains constant and as such there will be no change in evaluation of your media query expressions. The only option available to your user in order to change the design would be to maximize the window, change the display resolution on their device (if possible) or to change to another device altogether.
This may well be sub-optimal for the user if viewing a design carefully intended for their full screen width in a window that is substantially smaller - requiring frequent scrolling and/or hiding important content off screen.
The 'width' feature instead targets the actual "display surface", meaning the window size or viewport. As stated in the specification-
The ‘width’ media feature describes the width of the targeted display
area of the output device. For continuous media, this is the width of
the viewport
This would mean that a user with a non-maximised window of (say) 40% of the device width would get the design you have chosen for that width and not the full 100% width of the device.
Related
I'm creating a responsive design web page, and I want to ensure I do all the media queries correctly for different devices and orientations.
This post suggests try using min-width and min-height media queries. And set up different break points for different resolutions.
screen orientation for multiple tablets with fluid design
Although, I found this method with the orientation (see below).
Should I use this approach or the one above?
Should I use #media screen, or should I consider all vs screen?
#media screen and (min-width: 700px) and (orientation: landscape) { ... }
Screen orientation is an interesting one as it's not always something that's reported back by the device/browser, so it's less reliable to use than min-width/max-width.
The other thing is that unless you're trying to do a particularly funky thing when the device is in landscape, then just adjusting your design based on width breakpoints is usually enough to get your desired effect.
If you have a landscape device, then it's probably okay to let the design display as it would at portrait with the same horizontal space. That is to say, it wouldn't be an unexpected behaviour for the user.
As for media all vs screen, I usually just stick with screen, as should the user want to do something like print the page, I don't necessarily want my break points to interfere in that.
As with anything though, you should think about the most common use cases for your users and make your decisions based on that. If it's just a regular web app/page, then there is nothing wrong at all with using just screen and not worrying about orientation.
I was researching about CSS media queries best practices and found the Foundation's definition.
As you can see, the first media query has no min/max-size definition:
#media only screen { } /* Define mobile styles */
Why do they use this media query as it defines no break-point? Is this a best practice or should be avoided?
Thanks!
That particular media query applies to all screens (of any size, orientation, aspect ratio or pixel density).
screen is a media type. Whatever you put inside that media query will only apply to screen and will not apply to content of other media_types.
Here is the list of currently recognized values for media_type. Most of them have been deprecated. The ones you should use (as they are probably here to stay) are:
all (implicit if none specified)
screen
print
speech
The guys at Foundation probably should change the comment after that query to a more explicit one. Instead of /* Define mobile styles */ they should have probably used /* General styles, including mobile */.
Look at the structure of their media queries and you will notice it is a mobile-first CSS framework. As in: you define the general styles (including mobile) first and than apply exceptions for ever increasingly wider screens.
Media queries are not only for breakpoints. You can specify the output medium like screen. In this case, only display screens are targeted. You can also target only print media, or media with specific orientation or resolution.
See more information about media queries and media types on MDN or w3schools.
I have a media query -->#media all AND (max-width: 1024)..which works well on a Samsung tablet, but I need this to only apply on th tablet and not on the pc. If the device is a pc, it should only #media screen and (max-width: 768px).. how do I go about it?
you can not check for the device (pc, tablet, handheld) with media queries, only for the device width (more, i know, but op ask for device-width).
Maybe this article will help you understand more of it?
Media query should never be device specific - you simply say 'for an output of this size do this, but for an output of a different size, do that'. Whether it's a phone, PC, tablet, kiosk, watch or anything else should be irrelevant. For this reason, media query doesn't enable you to query hardware as such.
You may want different behaviour (rather than style) based on device capability, e.g.. is this a 'touch' device? But that should be managed in JS rather than CSS.
What is the actual goal of your query? Does it matter that the CSS is applied to a PC as well as a tablet?
The short answer: you don't.
The longer answer: you're going about it the wrong way.
It's easy to fall into the trap of using screen widths to target specific devices, but that's an Alice in Wonderland rabbit hole. Why? Because the widths of mobile devices overlap with the widths of desktops.
For example, here are a list of screen widths, can you guess which ones are desktop?
1024
1366
1200
1080
Guess what? I bet you're wrong about your guesses. 1024 and up seems like a "desktop" resolution, but iPhone 5 Retina is 1136x640, and the 3rd generation iPad is 2048x1536. To make things even more complicated, many people on desktops don't keep their browsers maximized, so device width does not equate to browser width. And what happens on the Kindle, which has a higher resolution, but also increases the text size?
And more devices are coming to the market on a regular basis.
So, your best bet? Abandon the idea of targeting specific devices or device classes altogether. If you absolutely have to, use JavaScript to look for touch screens (as that's the most likely reason you need to adjust the interface specifically for a class of devices).
You can still use media queries to target widths (or better yet, in my experience, use proportional media queries), but don't expect it to necessarily work on a given device.
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
Let's say I just want to target every tablet and phone, regardless of size, is there a media query for this? Is it possible to do this without specifying a size? Or is using a size the only way to target mobile devices, and not desktops?
I've been struggling with this for a few days, but a good way to check for handheld devices is the max-device-width. Desktop pc's don't send this to the browser, but most (if not all) handhelds do use this.
In my case I wanted to show a compressed version of the site on all devices (including desktop) when below a certain width, for which I used
#media all and (max-width: 640px)
But a certain overlay popup that used position: fixed had to be changed on handhelds only (because the css property works in all desktop browsers but not on all handhelds). So for that I used an additional rule:
#media all and (max-device-width: 640px)
In which I target all handhelds below 640 but not desktop browsers. Incidentally, this also doesn't target iPads (which is how I wanted it) because it has a higher device width than 640px.
If you just want to target all devices just pick a low min width (1px) so that it doesn't exclude any device regardless of width.
In the CSS3 spec, #media handeld is mentioned but it has perhaps no browser support.
So, no.
However, you might find this site useful, it explains other some media query techniques for mobile.
I don't think you'll have too much luck with a pure css approach. You'll want to do something along the lines of the modernizer.js approach and us JS to detect device and append a class name to body based on that.
What is the best way to detect a mobile device in jQuery?
Then include that class in your media queries to special case mobile devices of varying sizes.