I need to set my site on desktop (1024 * 768) and ipad, but I can not separate his Vizualization.
I'm using in Ipad:
# media only screen and (min-device-width: 768px) and (max-device-width : 1010px)
and desktop:
# media (min-width: 1020px)
its Works in Firefox, but not Chrome.
Rather than trying to target specific devices, it's arguably better to set appropriate breakpoints specific to your layout. That is, gradually narrow your browser and observe the points at which this particular design needs to reflow. Then set styles that apply to those points, and let each device receive whatever layout works best within its dimensions.
So, in the head of your page, I recommend you place this:
<meta name="viewport" content="width=device-width">
and then in your style sheet, use something like this (the numbers are arbitrary):
/* default styles, perhaps for basic mobiles and older browsers */
/* end default styles */
#media only screen and (min-width: 1025px) { }
#media only screen and (min-width: 701px) and (max-width: 1024px) { }
#media only screen and (max-width: 700px) { }
#media only screen and (min-width: 320px) and (max-width: 480px) { }
There are so many combinations of this that the above is just a rough example. You don't always need max and/or min. It depends on the layout.
There's also an argument for using ems instead of px, but I won't go there for now. :)
Why not just cascade down?
#media screen and (max-width : 1024px){ /*Styles*/ }
#media screen and (max-device-width : 768px){ /*Styles*/ }
1024x768 is iPad size anyway.
Related
I'm doing a website that is supposed to work on mobile devices. I have researched about the subject and every website recommends that I use a different media query for each device I intend the website to work on, for example:
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* etc... */
However I feel it would be much much simpler to just use one media query for landscape and another for portrait orientation, but I haven't found anyone recommending that.
I imagine you may want to design something more specific for tablet. But speaking only about mobile phones, I can only thing of a reason to have different media queries for each device if you want something CRAZY specific.
Is there any reason for it?
Should I add a media query for each device or is it "safe" to continue with only two media queries?
That's absolutely fine. Don't forget to add the responsive meta tag to every page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and then use media queries as you resize your preview window width and height. That'll make the website same as the desktop version.
You can totally pull it off with just one or two media queries. I do it all the time for tablet and then for mobile in fully responsive sites that work on all devices. Those type of fleshed out media queries are for very specific sizes when the developer wants to have a set version of the site for this size and that size.
#media screen and (max-width: 1024px) {
/* Landscape style changes */
}
#media screen and (max-width: 768px) {
/* Portrait to mobile style changes */
}
#media screen and (max-width: 450px) {
/* Maybe one more because that header text doesn't fit anymore on smaller screen */
}
It will be as good the rest of your code, but if you have clean css this should not be a problem.
There is NO problem with it, as far as I see it.
You make your site Responsive for not only the browser window (resizing) but also Adaptive on specific devices. Adding and on those media queries is good too if you see how it behaves (target) on Android phones since your breakpoint basis are iPhone.
You may consider creating another .css file for phone/mobile, the same goes for others (Tablet, TV, etc).
w3schools - media queries
Put all your mobile queries on separate .css. Facebook did the same m.facebook.com.
I'm looking for a list of generic CSS media queries to match phone (both portrait and landscape), tablet (both portrait and landscape) and desktop.
I have found many posts with some generic media queries, but they are often different and maybe I don't understand them.
For instance, the following query:
#media only screen and (max-width: 768px) { }
does it match all phones (portrait and landscape) and tablet portrait? Or what?
I also found other examples, like the following:
/* mobile */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) { }
/* tablet */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { }
and
/* mobile */
#media screen and (max-width:767px) { }
/* tablet */
#media screen and (max-width:1024px) { }
Which of the previous queries are correct to correctly match phone (both portrait and landscape) and tablet (both portrait and landscape)?
Thanks
Best way to use media queries, like Marcos said is to use resolutions. Your first code #media only screen and (max-width: 768px) { } will target all the devices that have maximal screen resolution of 768px. So if your phone have a resolution of 640px it will affect it, if your phone have a bigger resolution of 768px the code you enter in {} will be ignored. Usually this is used to make responsive designs, and you use queries with different resolutions for different devices (you can easily find online the most common queries).
Hope it helps.
I'm trying to specifically target my desktop resolution using media query CSS which is 1366 x 768. Therefore i used this method.
#media (max-width: 1367px)
This desktop media query CSS actually works.
Unfortunately, it clashes with my media query CSS for my S4 and iPad which caused them not to be working. As shown below is my media query for my S4 and iPad
S4
#media only screen and (max-device-width: 440px)
iPad
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)
Apart from the method i tried above to perfect my CSS, is there any way i can specifically target the desktop resolution of mine which is 1366x768?
#media (max-width: 1367px) and (min-width: 1365px)
Your max-width rule includes everything less wide than 1376px, so you should set a minimum.
Don't forget, these measurements refer to the browser window, and not the actual screen, so they may not be correct for your purposes.
For example, my desktop is at 1600 x 1200.
At full screen, my Firefox window, as it would be referenced by css, is 1583px wide. Not 1600px.
Use more specific queries for your iPad and S4:
iPad
CSS
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
Smartphone (S4)
CSS
#media only screen
and (min-device-width : 320px)
and (max-device-width : 440px) {
/* Styles */
}
Start with the largest screen devices and update the rules as the resolution drops:
#media screen and (min-width: 1367px){ ... }
#media screen and (max-width: 1366px) and (min-width:1024px){ ... }
#media screen and (min-width: 1023px) and (max-width:768px){ ... }
and so on.
If you want to make use of cascading, keep in mind that the last rules will inherit the styles from the rules declared before them:
#media screen and (max-width:1023px){...}
#media screen and (max-width:768px){...} ->
In this case, the screens < 768px will inherit the rules from the previous declaration also.
How can I target devices which are wider than 1000 pixels? That is, including iPad in landscape mode and most desktops but excluding iPad in portrait mode.
I have found how to target iPad specifically:
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
However, I would prefer if my media queries could be shaped by at what widths the content prompted layout changes rather than by specific devices.
If I understand your question correctly, you don't need to try and target specific devices at all.
In your main CSS just include:
#media (min-width: 1000px) {
/* CSS styles for viewports 1000px and up */
}
and in the head of your page include
<meta name="viewport" content="width=device-width, initial-scale=1.0">
EDIT
Here is a working example which you can check in an iPad:
Live: http://fiddle.jshell.net/panchroma/Bn4ah/show/
Code view: http://fiddle.jshell.net/panchroma/Bn4ah
Good luck!
While that article you referenced from CSS-Tricks is a very handy reference (and Chris Coyier is my nerd-idol) it may be a bit misleading. Media queries at their core are just fancy if statements, and if the entire statement evaluates as true, then the corresponding style sheet or style rules are applied, following the normal cascading rules.
Let's look at a common media queries:
#media screen and (min-width: 768px) { ... }
Notice the screen parameter. It says nothing about the device width nor browser chrome. Read in plain English, it says "if the media we're working on is the screen, and if that screen is a minimum of 768px or bigger, use these styles.
So, to answer your question: to target screens that are larger than 1000px wide, try this:
#media screen and (min-width: 1000px) { ... }
Just remember that you're targeting all screens at least 1000 pixels wide. If you need to target specific devices, I recommend using JavaScript to handle specific UserAgent targeting.
I'm testing a website I'm developing and am using media queries.
When I test and resize the page in a browser, everything is good.
But when I test on my mobile device, I encounter a problem when I change the orientation of the phone.
If I load the page in landscape mode, the correct CSS are applied.
When I change to portrait, the CSS are also correct.
But if I go back to landscape, the portrait css classes are still being applied.
I'm using these metatags
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
And in my media queries I have
#media
only screen and (max-width: 610px),
only screen and (max-width: 610px) and (orientation:landscape) { ... }
#media
only screen and (min-device-width: 240px) and (max-device-width: 520px),
only screen and (min-width: 240px) and (max-width: 520px) { ... }
I've alerted the device width to make sure it's ok and in landscape mode it's 598px wide and portrait is 384px
I'm using a Nexus 4 (Android 4.3)
How come the CSS aren't applied once I change back the orientation?
EDIT:
If I load the site in portrait and then change to landscape, the CSS aren't applied.
It's as if once it goes to the smallest resolution, it can't go back.
On my Nexus 4, I have something that looks like this and seems to work for your test cases:
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<meta name='viewport' content='width=device-width'>
And I make no reference to orientation in the media query, for example:
#media only screen and (max-width: 610px) { /* Some CSS here */ }
EDIT: Looks like you have to put max-device-width after the other max-width stuff in terms of the media queries. To quote vyx.ca in the comments below...
Just found my problem. Notice how I define 'max-device-width' before the rest. If I put that condition last, it works. 'max-device-width' is used for retina display.
My problem is related to the order of my CSS requests.
I used to define 'min-device-width' before the rest.
#media
only screen and (min-device-width: 240px) and (max-device-width: 520px),
only screen and (min-width: 240px) and (max-width: 520px) { ... }
But if I define it last, it works.
#media
only screen and (min-width: 240px) and (max-width: 520px),
only screen and (min-device-width: 240px) and (max-device-width: 520px) { ... }
For more information about device-width:- check out this question
Well-known quiksmode site defines device-width / device-height media features as static.
These media queries are static once determined; i.e. they do not update the value they’re checked against when the device orientation is changed. (So if you start in portrait and then switch to landscape, the portrait device-width still counts. Reloading the page solves this.)
That's why using max-device-width is still applied after changing orientation.
this code worked for me:-
#media only screen and (min-width: 240px) and (max-width: 520px), only screen and (min-device-width: 240px) and (max-device-width: 520px) and (orientation:portrait)
{
body
{
background:#009;
}
}
#media only screen and and (max-width: 610px), only screen and (max-device-width: 610px) and (orientation:landscape)
{
body
{
background:#993;
}
}
Your media queries have overlap. Max-width of 520 will also be true of max-width 610. Also you have an OR in the landscape so it's possible to be true in Portrait if max-width 610 is true. Overlapping media queries will work like CSS in that it cascades so you'll get odd behavior.
I don't see any reference to orientation:portrait in your queries so how do you know portrait classes are being applied. You typically want to make it an either or when doing orientation queries.
Also try adding min-width to remove any width overlap
#media only screen and (orientation:landscape) { ... }
#media only screen and (orientation:portrait) { ... }