How does #media only screen and (min-width: 1200px) differ from meta name="viewport" content="width=device-width"
I tried to place them both but nothing changes.
#Media only screen support IE9-10 and windows phones-, where as meta name="viewport" content="width=device-width" only support browsers like Chrome, Safari, Fire-F and Opera
Viewport :You're setting your mobile browser's viewport's width to be equal to your device width.For all the devices and desktops
Media Queries:A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Separate mediaqueries for each resolutions of the devices
Related
I am referencing this guide on how to "make a mobile friendly website." It does not seem to be taking effect on my Chrome-Browser for Android.
#viewport {
width: device-width ;
zoom: 1.0 ;
}
I added this to my Django static files in app.css and it is definitely on the website because I can see it using Chrome Developer Tools on my laptop. However, when I use my Android phone (Galaxy S8 if that matters) it does not fit to screen.
I also have this in my base.html that my entire site is using:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Some follow-up questions: Do I need to empty the cache on my phone? How can I use Chrome Developer Tools on my phone to inspect the CSS of a website?
From What I understand that is just a css based replacement for the following HTML meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
I would suggest using the above meta tag in your index.html In addition too this you will still need to add #media queries to actually make it responsive for the various screen sizes.
// Extra small devices (portrait phones, less than 576px)
#media (max-width: 575px) ...
// Small devices (landscape phones, less than 768px)
#media (max-width: 767px) ...
// Medium devices (tablets, less than 992px)
#media (max-width: 991px) ...
In addition to the above PX based breakpoints, you can also use DPI-based break points: https://css-tricks.com/snippets/css/retina-display-media-query/
But to actually answer your question about the remote debug console I don't know about anything else that workes as well as the Chrome Developer tools for mobile (Ctrl + Shift + M)
use <meta name="viewport" content="width=device-width, initial-scale=1.0">.
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've researched this question and tried to solve it on my own for hours, to no avail. Hoping one of you can help. I am using this media query for the style I want on a desktop browser:
#media all and (min-width: 320px) {}
And I'm using this media query for the style I want on mobile browser:
#media screen and (max-width: 320px) and (min-width: 0px) {}
When I drag the desktop browser to less than 320px, the style changes accordingly. But when I bring up the website on a mobile browser, it displays the desktop style. What am I doing wrong?
You need to include this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Hope it helps!
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 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/