I've got these media queries set. But how do I edit this to have separate media queries set for the portrait, landscape versions (e.g.: iPad, iPhone)?
#media only screen and (min-width : 1824px) {}
#media only screen and (min-width: 1200px) and (max-width: 1823px) {}
#media only screen and (min-width: 992px) and (max-width: 1199px) {}
#media only screen and (min-width: 768px) and (max-width: 991px) {}
#media only screen and (max-width: 767px) {}
#media only screen and (max-width: 480px) {}
#media only screen and ( orientation: portrait ) {}
#media only screen and ( orientation: landscape) {}
I think thats what you are looking for.
Edit:
I think by fit in to my css you mean this:
#media (max-width: whatever) and (orientation: landscape) {}
If you are asking for a suggestion that when to use portrait or landscape, then use landscape when width of viewport is more and vice versa.
max-width: 1024px will set an upper limit and it will not interfere with rules for range: 1200px-1823px.
We have to add orientation: portrait and orientation: landscape to your media screen.
iPad Landscape and Portrait
/* iPad Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
/* ur CSS */
}
/* iPad Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
For latest iPads use pixel ratio:2 (Retina display) .
-webkit-min-device-pixel-ratio: 2
Similarly for iPhone's, for iPhone's you have to set media for 4 different screens , < iPhone 4S , iPhone 5S and iPhone 6 and 6 plus versions.
Related
i have make a sence and it works only for ipad-pro (1366*1024) landscape. It dont disturb my 1366*768 device viewport. let me show the code below:
#media only screen
and (min-device-width: 1025px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape){selector{
background-size: 100% 75% !important;
background-position: center top 188px!important;
background-repeat:no-repeat;background-attachment: fixed;
}
}
now i need another media query which can work only for 1366*768. i edit the upper one for 1366*768 but it cant work. I think i help you make understand what i actually want: please help somebody!
/* ----------- iPad Pro ----------- */
/* Portrait and Landscape */
#media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Portrait */
#media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Landscape */
#media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
Try this and check.I don't have an iPad Pro but this works for me in the Chrome simulator.
Should I use landscape and portrait together like
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}
OR separate like
#media only screen and (min-width : 321px) {} for landscape
#media only screen and (max-width : 320px) {} for portrait
Or all together? Whats the difference here?
The top query will only target screen widths between 320px and 480px.
#media only screen and (min-width : 321px) {} will target anything wider than 321px.
#media only screen and (max-width : 320px) {} will target anything smaller than 320px.
You could add something like #media only screen and (min-width: 320px) and (orientation: landscape) {} which will only return true if the device is 320px or wider and in landscape.
(orientation: portrait) is also allowed in media queries.
You can do them together if you put the orientation with the media query
#media only screen and (max-device-width: 320px) and (orientation: landscape),
#media only screen and (max-device-width: 480px) and (orientation: portrait) {
/* styles here */
}
I'm making this website & I made the media settings for mobile, tablet, laptop, desktop. It looked good in all other phones. I havent' checked yet on actual tablet, but its fine on the chrome browser emulator.
However, my friend checked out the site in his Iphone6 Plus and the navbar settings were messed up. Btw, I'm using Bootstrap 3 for the framework.
I'm confused why my code is working on other phones but not on Iphone6 Plus.
Maybe even Iphone6 have the same problem?
Here is my media css:
/* Tablet (Portrait) */
#media only screen and (max-width : 768px) and (orientation: portrait) {
}
/* Phones (Portrait) */
#media only screen and (max-width : 480px) and (orientation: portrait) {
}
/* Phones (Landscape) */
#media only screen and (max-width : 480px) and (orientation: landscape){
}
/* Tablet (Landscape)*/
#media only screen and (max-width :1100px) and (orientation: landscape) {
}
/* Medium Devices, Desktops and tablet landscape*/
#media only screen and (min-width : 992px) {
}
/* Large Screens, Large Desktops */
#media only screen and (min-width : 1601px) {
}
I already checked online that the pixel density & resolution is quite different for Iphone6 Plus. We've tried the solution from here : iPhone 6 and 6 Plus Media Queries
So far, even those queries didn't fix our problem. It seems like there were no changes. I hope this problem could be resolved quickly, I appreciate your help.
Everything comes down to device-pixel-ratio which used to be 2x for iphones. New iphone 6 plus has 3x retina display
/* iPhone 6 landscape */
#media only screen and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2)
{
/* Your CSS */
}
/* iPhone 6 portrait */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2)
{
/* Your CSS */
}
/* iPhone 6 Plus landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 3)
{
/* Your CSS */
}
/* iPhone 6 Plus portrait */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 3)
{
/* Your CSS */
}
/* iPhone 6 and 6 Plus */
#media only screen
and (max-device-width: 640px),
only screen and (max-device-width: 667px),
only screen and (max-width: 480px)
{
/* Your CSS */
}
Further more, an article from CSS | MDN to add more browsers support and a fallback.
link : https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
#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 */
A list of devices with their respective device-pixel-ratio.
link : https://bjango.com/articles/min-device-pixel-ratio/
When I look on my iPad on landscape view, the CSS Media query max-width: 992px is not working and the responsive layout is still visible (but on desktop it breaks at 992px). Any help is appreciated.
<meta name="viewport" content="width=device-width" />
My CSS media queries:
.responsive_button{display:none;}
#media only screen and (max-width: 992px) {
.responsive_button{display:block;}
}
#media only screen and (max-width: 768px) {}
#media only screen and (max-width: 480px) {}
#media only screen and (max-width: 320px) {}
iPad resolution is:
768px by 1024px (Portrait)
1024px by 768px (Landscape)
If you want to target ipad's different orientation use the below media queries mind that the orientation is specified as well.
iPad in Portrait
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }
iPad in Landscape:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES GO HERE */}
An iPad's resolution is 768px by 1024px, this means in landscape mode, it is 1024px wide. The media query will not be active as 992px fits onto the 1024px wide screen.
As a general rule, iPads in landscape mode should just be treat as desktop screens.
I want to create generic responsive templates,
which media-queries i have to use if i want to detect all the devices sizes?
Check this Common CSS Media Queries Break Points
/*------------------------------------------
Responsive Grid Media Queries - 1280, 1024, 768, 480
1280-1024 - desktop (default grid)
1024-768 - tablet landscape
768-480 - tablet
480-less - phone landscape & smaller
--------------------------------------------*/
#media all and (min-width: 1024px) and (max-width: 1280px) { }
#media all and (min-width: 768px) and (max-width: 1024px) { }
#media all and (min-width: 480px) and (max-width: 768px) { }
#media all and (max-width: 480px) { }
/* Portrait */
#media screen and (orientation:portrait) { /* Portrait styles here */ }
/* Landscape */
#media screen and (orientation:landscape) { /* Landscape styles here */ }
/* CSS for iPhone, iPad, and Retina Displays */
/* Non-Retina */
#media screen and (-webkit-max-device-pixel-ratio: 1) {
}
/* Retina */
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}
/* iPhone Portrait */
#media screen and (max-device-width: 480px) and (orientation:portrait) {
}
/* iPhone Landscape */
#media screen and (max-device-width: 480px) and (orientation:landscape) {
}
/* iPad Portrait */
#media screen and (min-device-width: 481px) and (orientation:portrait) {
}
/* iPad Landscape */
#media screen and (min-device-width: 481px) and (orientation:landscape) {
}
I highly recomend using Bootstrap. Faster development. Also documentation is very complete.
http://getbootstrap.com/getting-started/
As for your question, you have this example:
/*Anything outside of media queries is for MOBILE
This is Mobile first approach.
*/
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) { ... }
Check if these websites help you out:
http://24ways.org/2011/conditional-loading-for-responsive-designs/
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/