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.
Related
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.
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).
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
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.