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.
Related
How to target all landscape devices below 1024 using css media query this should work only for mobile devices not desktop browsers
You can try it like this
#media only screen
and (min-device-width: 1024px)
and (min-device-pixel-ratio : 2.0)
and (orientation: landscape) {
//styles here
}
In below Media Query CSS will be affected to devices where maximum width is 1024px. That means devices where screen width is less than 1024px will be affected from this.
#media screen and ( max-width :1024px) and (min-device-pixel-ratio : 2.0)
and (orientation: landscape){
.your_CSS_Class{
//your styles
}
}
#media only screen
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
//your styles
}
There are some styles that I wish to apply to smartphone, both in portrait and in landscape orientation.
Is there a good media query that targets both scenarios? Actually I have to repeat the css with two media queries:
.selector {
// smartphone portrait
#media (min-width: 320px}) and (max-width: 512px}) {
// stuff
}
// smartphone landscape
#media only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) {
// same stuff
}
}
I believe if you create a media query with the min-width being the portrait phone screen width and the max-width being the landscape phone screen width it should cover it all regardless of orientation.
I have made a simple website which is responsive (more or less). I have used media query #media only screen and (max-width: 699.99px). Now I know that this will activate the css inside it when resolution is less than 699.99px. So it is fine with computer but it doesn't work in mobiles and I know why. But I don't really understand how to solve this. I want this query to work on computer screen (resizing) as well as mobile devices and tablets.
You can use em or rem instead of px. This makes the styling depend on how much content fits on the screen assuming that you also use em/rem to set the sizes of your elements.
could be an issue with difference between real screen width and actual size
<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
or you can use media-device-width
#media only screen and (max-device-width: 700px) {
/* Style goes here */
}
but I suggest you to start with mobile-first approach that will definitely solve the issue. basically first you do css for mobile and then you override css for desktop with media queries like
#media only screen and (min-width: 700px){
/* Style goes here */
}
btw does your device support 699.99px? try using 700 instead
First of all if you want make your website responsive it's better to use responsive framework like Bootstrap or foundation.
but if you prefer to do it without framework. try this
you can make 4 media query steps
// Extra small devices (portrait phones, less than 544px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 544px and up)
#media (min-width: 544px) { ... }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
and extra guide
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
I hope this can help
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'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.