I have the following rules:
#media only screen and (min-device-width : 320px) and (max-device-width : 480px)
#media only screen and (min-width : 321px) /* Smartphones (landscape) */
#media only screen and (max-width : 320px) /* Smartphones (portrait) */
#media only screen and (min-width: 768px) /* tablets and desktops */
How to catch tablet portrait without affect the other rules?
There is no standard for "tablet portrait" in terms of device pixel width.
The #media orientation query is not very reliable at all and not widely supported. See here. You are best off just using min-width and max-width media queries and trying to get it to work at ALL possible widths than targeting a specific orientation. That's pretty much how responsive design is supposed to work anyway.
Portrait mode tablets will generally be between 768px and ~960px wide.
#media only screen and (min-width: 768px) and (orientation:portrait) and (min-height:1024px)
You should also beside specifying min-width and min-height specify max width and height combining it with orientation, then you really catch up mobiles without affecting others like tablets or pc, right now only with min-width for mobiles will also affect all devices accomplying that min-width
Pure CSS has helper classes for hiding stuff in tablets.
The media query it uses for tablets is as follows:
#media (min-width: 768px) and (max-width: 979px)
You could also try adding (orientation:portrait) to that.
(As seen in http://yui.yahooapis.com/pure/0.3.0/pure.css)
Related
I am learning webdesign(wordpress) so I come in problem with media queries.
I use Bootstrap 4 grid system so I am using also media queries of bootstrap 4
which is :
// Extra small devices (portrait phones, less than 576px)
#media (max-width: 575.98px) { ... }
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) and (max-width: 767.98px) { ... }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) and (max-width: 991.98px) { ... }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
I see these media queries are not enough, especially with iPhones and Samsungs new series.
I see that I have to write extra breakpoints to target those mobiles.
I made a search in google and I see another kind of media queries which is targeting width and height with webkit-device-pixel-ratio:2 or 3 etc. I see also there is also a device targeting media queries which makes me confused.
my question is now:
if I use extra breakpoints for 375 width 4014 width iPhones etc will be enough or I have also to target height and webkit-device-pixel ratio.
What do you advise me? There are a lot of mobile devices with different resolutions.
thanks,
I did with this code:
#media screen and (min-device-width: 360px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
.site-header {
background-color:brown;
}
}
but when I open in chrome inspect elements I see it is only targetting Galaxys5 and Moto G4.not iphone or Pixel2.
you can see yourself on: http://webdesignleren.com/
thanks
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.
I am using bootstrap to build a client's site and I have come unstuck when trying to target landscape and portrait orientation on mobile in order to add some specific styles for both viewports. How do I target portrait and landscape orientation for mobile styles? I need to add specific styles at 320px breakpoint and certain styles at 480px breakpoint. With my current media queries this is not working Currently in my stylesheet I have the following:
/* portrait phones */
#media only screen and (max-width: 320px) and (orientation:portrait) {
/* Styles */
}
/* landscape phones */
#media only screen and (min-width: 321px) and (orientation:landscape) {
/* Styles */
}
If I put styles in for landscape however I don't think they are being picked up. Every time I make a change and then refresh my Iphone I don't see any difference. Im thinking maybe my media queries are wrong? If there is a better way to target mobile states I would greatly appreciate any help.
Try to use:
#media (orientation: portrait) and (max-width: 400px) {Fooobar}
#media (orientation: landscape) and (max-width: 400px) {foobar}
I managed to resolve this issue in the end by adding a max-width to my 321px media query and was able to target both landscape and portrait mobile orientation. I also found in my header I had: initial-scale=1 which seemed to be causing the problem and after removing it I was able to target the mobile breakpoints I needed.
/*Portrait phones */
#media (max-width:320px){}
/* Landscape phones and down */
#media (min-width: 321px) and (max-width: 480px) {}