I am very new to the world of media queries, and it's clear there's something fundamental I'm missing about the difference between width and device-width -- other than their obvious targeting capacities.
I would like to target both regular computers and devices with the same breakpoints, so I just duplicated all of my min & max width queries to min-device and max-device width queries. For whatever reason, when I add the -device counterparts, my CSS is interpreted very differently by regular computers, and I'm not sure what I'm doing wrong.
You can see the effects here (this is what it SHOULD look like)
And here (after adding -device-width to my queries, my CSS gets screwed up at the smallest width -- the larger resolutions are seen even when the browser width is smaller than what is getting called).
Here are my CSS links -- is there something wrong with my syntax? :
<link rel="stylesheet" media="only screen and (max-width: 674px), only screen and (max-device-width: 674px)" href="300.css">
<link rel="stylesheet" media="only screen and (min-width: 675px) and (max-width: 914px), only screen and (min-device-width: 675px) and (max-device-width: 914px)" href="650.css">
<link rel="stylesheet" media="only screen and (min-width: 915px) and (max-width: 1019px), only screen and (min-device-width: 915px) and (max-device-width: 1019px)" href="915.css">
<link rel="stylesheet" media="only screen and (min-width: 1020px), only screen and (min-device-width: 1020px)" href="1020.css">
<link rel="stylesheet" media="only screen and (min-width: 1200px) and (max-width: 1299px), only screen and (min-device-width: 1200px) and (max-device-width: 1299px)" href="1200.css">
<link rel="stylesheet" media="only screen and (min-width: 1300px), only screen and (min-device-width: 1300px)" href="1300.css">
Device-width refers to the display's resolution (eg. the 1024 from 1024x768), while width refers to the width of the browser itself (which will be different from the resolution if the browser isn't maximized). If your resolution is large enough to get you in one break point, but the width of the browser is small enough to get you in another one, you'll end up with an odd combination of both.
Unless you have a legitimate reason to restrict the style sheets based on the resolution and not the size of the viewport, then just use min-width/max-width and avoid min-device-width/max-device-width.
device-width is deprecated in Media Queries Level 4.
Refer to MDN docs here for more details.
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; Be aware that this feature may cease to work at any time.
So, width and height features should be used to consider the width and height of the viewport respectively.
P.S. These are range features they can be prefixed with min- or max- to express "minimum condition" or "maximum condition" constraints. Reference here.
Related
I've done a little work on my site to show smaller screens (in pixels) another navigation (bigger) than the larger screens.
Now this works on my desktop when resizing the browser window, but there are of course also mobile phones which have the same number of pixels as my desktop machine, but then in a very small screen (let's say 5 inches).
So what I want to do is: show the 'desktop' css not only when you have lots of pixels, but also when your screen is say 10 inch or larger.
Can I accomplish that with media queries?
This is what i have now:
<link rel="stylesheet" href="/styles/style-mobile.css" media="only screen and (max-width: 840px)" >
<link rel="stylesheet" href="/styles/style-desktop.css" media="screen and (min-width: 841px)">
<link rel="stylesheet" href="/styles/style-desktop.css" media="print">
Use resolution in your media query to distinguish between devices of different pixel densities.
For instance to tend to a 288 dpi device where one logical pixel is three hardware pixels, use one of these
#media screen and (min-resolution: 3dppx) { ... }
#media screen and (min-resolution: 288dpi) { ... }
where dppx means dots per pixel, and dpi, of course, dots per inch.
See W3C or MDN.
Add device-pixel-ratio and resolution to your media queries. To maximize cross-browser compatibility you should use something like this:
#media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
(min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */
(min-resolution: 2dppx), /* The standard way */
(min-resolution: 192dpi) { /* dppx fallback */
...
}
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Pixel ratio values for different devices can be found here: http://bjango.com/articles/min-device-pixel-ratio/
I'm looking answers for some questions about CSS3 feature - Media Queries:
Which way is better (for browser due to the performance) for declaring css rules for different resolutions?
//this in head:
<link rel="stylesheet/less" href="/Content/site1024.less" media="screen and (max-width: 1024px)" />
//or this in css file:
#media only screen and (max-width: 1024px){
//styles here
}
What is difference between max-device-width and max-width? Is it only rule addressed for mobile(max-device-width) or desktop(max-width) browsers?
If I write media query rule for tablet with resolution 1280x800 where user can also use portrait/landscape mode, how should it look? I should write rules for max-width: 800px and max-width: 1280px or there is another way?
If I write rules I should write something like this:
<link ... media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)... />
or instead this two:
<link ... media="only screen and (max-device-width: 480px) ... />
<link ... media="only screen and (max-device-width: 1024px) ... />
P.S. Please excuse any spelling or grammatical mistakes, English isn't my first language
P.S.S. Before I posted this question I spend a while to search on stackoverflow and didn't find information about this question. If I was wrong and there is similar question I will delete my post.
Rules in css file to reduce number of requests (better for performance).
max-width is the width of the target display area
max-device-width is the width of the device's entire rendering area
The another way I know to target portrait or landscape is to add orientation like this:
/* portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
/* styles here */
}
/* landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) {
/* styles here */
}
To define a stylesheet for mobile devices with a width between 320 and 480 pixels you have to write:
<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 480px)" href="mobile.css">
I'am searching for good information about best practices in responsive design and I'll give you an advice.
In This question the developer get into a problem when he use CSS portrait condition and make the keyboard appears when he choose a input text of the document. I'm not sure why but it breaks the portrait condition.
In This website you can find information about better practices when you are creating media query's which I think are the best. Personaly I'll use the Exclusive type of media query in my website.
But by the other hand you could follow This site recomendations. I think that they are right but I prefer to create and use popular device dimentions media query's by myself.
Here is the list:
< 480px (which applies to older, smaller smartphone screen sizes)
< 768px, which is ideal for larger smartphones and smaller tablets
768px, which applies for everything bigger such as large tablet screens and desktops screens.
Also, these can be used too if you've got the energy and time:
<320px, which is great for older small, low res phones
1024px stylesheet for wide screens on desktops.
I hope it help you.
What is the difference between screen and only screen in media queries?
<link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />
Why are we required to use only screen? Does screen not itself provide enough information to be rendered only for screen?
I've seen many responsive websites using any of these three different ways:
#media screen and (max-width:632px)
#media (max-width:632px)
#media only screen and (max-width:632px)
Let's break down your examples one by one.
#media (max-width:632px)
This one is saying for a window with a max-width of 632px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases.
#media screen and (max-width:632px)
This one is saying for a device with a screen and a window with max-width of 632px apply the style. This is almost identical to the above except you are specifying screen as opposed to the other available media types the most common other one being print.
#media only screen and (max-width:632px)
Here is a quote straight from W3C to explain this one.
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
As there is no such media type as "only", the style sheet should be ignored by older browsers.
Here's the link to that quote that is shown in example 9 on that page.
Hopefully this sheds some light on media queries.
EDIT:
Be sure to check out #hybrids excellent answer on how the only keyword is really handled.
The following is from Adobe docs.
The media queries specification also provides the keyword only, which is intended to hide media queries from older browsers. Like not, the keyword must come at the beginning of the declaration. For example:
media="only screen and (min-width: 401px) and (max-width: 600px)"
Browsers that don't recognize media queries expect a comma-separated list of media types, and the specification says they should truncate each value immediately before the first nonalphanumeric character that isn't a hyphen. So, an old browser should interpret the preceding example as this:
media="only"
Because there is no such media type as only, the stylesheet is ignored. Similarly, an old browser should interpret
media="screen and (min-width: 401px) and (max-width: 600px)"
as
media="screen"
In other words, it should apply the style rules to all screen devices, even though it doesn't know what the media queries mean.
Unfortunately, IE 6–8 failed to implement the specification correctly.
Instead of applying the styles to all screen devices, it ignores the style sheet altogether.
In spite of this behavior, it's still recommended to prefix media queries with only if you want to hide the styles from other, less common browsers.
So, using
media="only screen and (min-width: 401px)"
and
media="screen and (min-width: 401px)"
will have the same effect in IE6-8: both will prevent those styles from being used. They will, however, still be downloaded.
Also, in browsers that support CSS3 media queries, both versions will load the styles if the viewport width is larger than 401px and the media type is screen.
I'm not entirely sure which browsers that don't support CSS3 media queries would need the only version
media="only screen and (min-width: 401px)"
as opposed to
media="screen and (min-width: 401px)"
to make sure it is not interpreted as
media="screen"
It would be a good test for someone with access to a device lab.
To style for many smartphones with smaller screens, you could write:
#media screen and (max-width:480px) { … }
To block older browsers from seeing an iPhone or Android phone style sheet, you could write:
#media only screen and (max-width: 480px;) { … }
Read this article for more http://webdesign.about.com/od/css3/a/css3-media-queries.htm
The answer by #hybrid is quite informative, except it doesn't explain the purpose as mentioned by #ashitaka "What if you use the Mobile First approach? So, we have the mobile CSS first and then use min-width to target larger sites. We shouldn't use the only keyword in that context, right? "
Want to add in here that the purpose is simply to prevent non supporting browsers to use that Other device style as if it starts from "screen" without it will take it for a screen whereas if it starts from "only" style will be ignored.
Answering to ashitaka consider this example
<link rel="stylesheet" type="text/css"
href="android.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css"
href="desktop.css" media="screen and (min-width: 481px)" />
If we don't use "only" it will still work as desktop-style will also be used striking android styles but with unnecessary overhead. In this case, IF a browser is non-supporting it will fallback to the second Style-sheet ignoring the first.
#media screen and (max-width:480px) { … }
screen here is to set the screen size of the media query. E.g the maximum width of the display area is 480px. So it is specifying the screen as opposed to the other available media types.
#media only screen and (max-width: 480px;) { … }
only screen here is used to prevent older browsers that do not support media queries with media features from applying the specified styles.
Media queries is used to create responsive web design. Both the screen and only screen are used in media queries.
screen: It is used to set the screen size of media query. The screen size can be set by using max-width and min-width.
screen is used to style for many smartphones with smaller screens, you could write:
#media screen and (max-width:630px){ ... }
In the above code screen is saying for a screen and window size with a max-width of 630px, you want to apply said styles.
only screen: The only keyword is used to prevent older browsers that do not support media queries with media features from applying the specified styles.
To block older browsers from seeing the stylesheet, you will write:
#media only screen and (max-width:630px){ ... }
The keyword ‘only’ will hide style sheets from older user agents.
I read the article about them over at css3.info, but I didn't feel like it explained it well enough. I also could not get their examples to change with my screen size. I attempted in Safari, FF, Chrome.
Is this a feature that is not ready for implimentation yet?
If I want to adjust some styles when the browser window is less than 1024px wide. How can I do that?
The rule applied to the screen size means that, citing W3C spec "is usable on screen and handheld devices if the width of the viewport is" in the specified constraints.
http://www.w3.org/TR/css3-mediaqueries/
If you want to adjust the style when the viewport is less than 1024px you can use this rule:
#media screen and (max-width: 1024px) { … }
anyway this rule applies only to the viewport actual size. If you resize the viewport without reloading the page the styles won't be applied.
To apply a style sheet to a document when displayed on a screen greater than 800 pixels wide:
<link rel="stylesheet" media="screen and (min-device-width: 800px)" >
To apply a style sheet to a document when displayed on any device less than 400 pixels wide:
<link rel="stylesheet" media="all and (max-device-width: 400px)" >
inside
#media all and (max-width:800px) {
body { color: red; }
}
for iphone
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
::combining media query
To see how different media queries react on resize or orientation change, try the demo on this page:
http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/
You can adjust the media query attributes to get a feel for how they affect a page.
Here are a few projects that solve this issue and are at the forefront of dynamic css and screen sizes:
320 and up:
‘320 and Up’ prevents mobile devices
from downloading desktop assets by
using a tiny screen’s stylesheet as
its starting point.
Lessframework:
Less Framework is a CSS grid system
for designing adaptive websites. It
contains 4 layouts and 3 sets of
typography presets, all based on a
single grid.
I am trying to use a media rule to target CSS to iPad only. I want to exclude iPhone/iPod and desktop browsers. I would like to to also exclude other mobile devices if possible.
I have used
<style type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)">
but just found out that desktop Safari 4 reads it. I have tried variations with "481px" instead of "768px" and another that adds an orientation to that:
<style type="text/css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
but no luck. (Later we will be sniffing user-agent strings for iPad, but for now that solution won't work.)
Thanks!
Update: it seems that desktop Safari uses the width and height of the screen at the moment and gives itself an orientation of portrait or landscape based on that. It doesn't look as though the widths and heights will rule out desktop browsers (unless I'm missing something).
https://mislav.net/2010/04/targeted-css/
media="only screen and (device-width: 768px)"
Thanks to Mislav Marohnić for the answer!
This works for iPad in either orientation and seems to exclude desktop Safari.
When I was testing (min-device-width: 768px) and (max-device-width: 1024px)
I could see Safari 4 using the styles or ignoring them as I widened or narrowed the window.
When testing (device-width: 768px) I tried to make the desktop Safari browser exactly 786px wide, but I never got it to see the styles.
I use PHP to do that. I isolate the plateform from the USER_AGENT string. Then I only have to use a if($plateform == 'iPad') {.....}
It's that easy!
This is a quite simlifying demonstration:
http://css-tricks.com/snippets/css/ipad-specific-css/