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