I want to target small screens (smartphones both in portrait and landscape orientation) with media queries.
For example the iPhone 6 has a resolution of 667 x 375, in logical pixels.
This media query targets it well (in portrait mode):
#media only screen and (max-width : 667px) {...}
Now if I want to target the same device, but in landscape mode, I thought I could do this:
#media only screen and (max-width : 667px) and (orientation: landscape) {...}
But that doesn't work. If I bump max-width to 668px it does work.
Why doesn't the first one work?
EDIT: here is my viewport meta tag from <head>:
<meta name="viewport" content="width=device-width">
Working 100% all iPhones.
/*==============================================================================
iPhone 4 and 4S || 320 x 480 || Default, Portrait and Landscape
================================================================================ */
#media only screen and (min-width: 320px)
and (max-width: 480px){
.test-class{display: none !important; visibility: hidden !important;}
}
#media only screen and (min-width: 320px)
and (max-width: 480px) and (orientation: portrait) {
.test-class{display: none !important; visibility: hidden !important;}
}
#media only screen and (min-width: 320px)
and (max-width: 480px) and (orientation: landscape) {
.test-class{display: none !important; visibility: hidden !important;}
}
/*==============================================================================
iPhone 5, 5S, 5C and 5SE || 320 x 568 || Default, Portrait and Landscape
================================================================================ */
#media only screen and (min-width: 320px)
and (max-width: 568px){
.test-class{display: none !important; visibility: hidden !important;}
}
#media only screen and (min-width: 320px)
and (max-width: 568px) and (orientation: portrait) {
.test-class{display: none !important; visibility: hidden !important;}
}
#media only screen and (min-width: 320px)
and (max-width: 568px) and (orientation: landscape) {
.test-class{display: none !important; visibility: hidden !important;}
}
/*==============================================================================
iPhone 6, 6S, 7 and 8 || 375 x 667 || Default, Portrait and Landscape
================================================================================ */
#media only screen and (min-width: 375px)
and (max-width: 667px){
.test-class{display: none !important; visibility: hidden !important;}
}
#media only screen and (min-width: 375px)
and (max-width: 667px) and (orientation: portrait) {
.test-class{display: none !important; visibility: hidden !important;}
}
#media only screen and (min-width: 375px)
and (max-width: 667px) and (orientation: landscape) {
.test-class{display: none !important; visibility: hidden !important;}
}
/*==============================================================================
iPhone 6+, 7+ and 8+ || 414 x 736 || Default, Portrait and Landscape
================================================================================ */
#media only screen and (min-width: 414px)
and (max-width: 736px){
.test-class{display: none !important; visibility: hidden !important;}
}
#media only screen and (min-width: 414px)
and (max-width: 736px) and (orientation: portrait) {
.test-class{display: none !important; visibility: hidden !important;}
}
#media only screen and (min-width: 414px)
and (max-width: 736px) and (orientation: landscape) {
.test-class{display: none !important; visibility: hidden !important;}
}
/*==============================================================================
iPhone X || 375 x 812 || Default, Portrait and Landscape
================================================================================ */
#media only screen and (min-width: 375px)
and (max-width: 812px){
.test-class{display: none !important; visibility: hidden !important;}
}
#media only screen and (min-width: 375px)
and (max-width: 812px) and (orientation: portrait) {
.test-class{display: none !important; visibility: hidden !important;}
}
#media only screen and (min-width: 375px)
and (max-width: 812px) and (orientation: landscape) {
.test-class{display: none !important; visibility: hidden !important;}
}
Related
This question already has answers here:
Media Queries: How to target desktop, tablet, and mobile?
(21 answers)
Closed 1 year ago.
Is there any Standard Media query to apply for my website or any css code so that my design can be responsive in all devices like desktops,mobile devices etc.
/*==============================================================================
iPhone 4 and 4S || 320 x 480 || Default, Portrait and Landscape
================================================================================ */
#media only screen and (min-width: 320px)
and (max-width: 480px){
}
#media only screen and (min-width: 320px)
and (max-width: 480px) and (orientation: portrait) {
}
#media only screen and (min-width: 320px)
and (max-width: 480px) and (orientation: landscape) {
}
/*==============================================================================
iPhone 5, 5S, 5C and 5SE || 320 x 568 || Default, Portrait and Landscape
================================================================================ */
#media only screen and (min-width: 320px)
and (max-width: 568px){
}
#media only screen and (min-width: 320px)
and (max-width: 568px) and (orientation: portrait) {
}
#media only screen and (min-width: 320px)
and (max-width: 568px) and (orientation: landscape) {
}
/*==============================================================================
iPhone 6, 6S, 7 and 8 || 375 x 667 || Default, Portrait and Landscape
================================================================================ */
#media only screen and (min-width: 375px)
and (max-width: 667px){
}
#media only screen and (min-width: 375px)
and (max-width: 667px) and (orientation: portrait) {
}
#media only screen and (min-width: 375px)
and (max-width: 667px) and (orientation: landscape) {
}
/*==============================================================================
iPhone 6+, 7+ and 8+ || 414 x 736 || Default, Portrait and Landscape
================================================================================ */
#media only screen and (min-width: 414px)
and (max-width: 736px){
}
#media only screen and (min-width: 414px)
and (max-width: 736px) and (orientation: portrait) {
}
#media only screen and (min-width: 414px)
and (max-width: 736px) and (orientation: landscape) {
}
/*==============================================================================
iPhone X || 375 x 812 || Default, Portrait and Landscape
================================================================================ */
#media only screen and (min-width: 375px)
and (max-width: 812px){
}
#media only screen and (min-width: 375px)
and (max-width: 812px) and (orientation: portrait) {
}
#media only screen and (min-width: 375px)
and (max-width: 812px) and (orientation: landscape) {
}
/*==============================================================================
Galaxy S3 || 320 x 640 || Default, Portrait and Landscape
================================================================================ */
#media screen and (width: 320px)
and (height: 640px){
}
#media screen and (width: 320px)
and (height: 640px) and (orientation: portrait) {
}
#media screen and (width: 320px)
and (height: 640px) and (orientation: landscape) {
}
/*==============================================================================
Windows Phone 480 x 800 Default, Portrait and Landscape
================================================================================ */
#media screen and (width: 480px)
and (height: 800px) {
}
#media screen and (width: 480px)
and (height: 800px) and (orientation: portrait) {
}
#media screen and (width: 480px)
and (height: 800px) and (orientation: landscape) {
}
/*==============================================================================
iPad 1, 2, Mini and Air || 768 x 1024 || Default, Portrait and Landscape
================================================================================ */
#media only screen and (min-width: 768px)
and (max-width: 1024px) {
}
#media only screen and (min-width: 768px)
and (max-width: 1024px) and (orientation: portrait) {
}
#media only screen and (min-width: 768px)
and (max-width: 1024px) and (orientation: landscape) {
}
/*==============================================================================
iPad Pro 10.5 || 834 x 1112 || Default, Portrait and Landscape
================================================================================ */
#media only screen and (min-width: 834px)
and (max-width: 1112px){
}
#media only screen and (min-width: 834px)
and (max-width: 834px) and (orientation: portrait) {
}
#media only screen and (min-width: 1112px)
and (max-width: 1112px) and (orientation: landscape) {
}
/*==============================================================================
iPad Pro 12.9 || 1024 x 1366 || Default, Portrait and Landscape
================================================================================ */
#media only screen and (min-width: 1024px)
and (max-width: 1366px){
}
#media only screen and (min-width: 1024px)
and (max-width: 1024px) and (orientation: portrait) {
}
#media only screen and (min-width: 1366px)
and (max-width: 1366px) and (orientation: landscape) {
}
/*==============================================================================
Galaxy Tab 2 || 800 x 1280 || Default, Portrait and Landscape
================================================================================ */
#media (min-width: 800px) and (max-width: 1280px) {
}
#media (max-width: 800px) and (orientation: portrait) {
}
#media (max-width: 1280px) and (orientation: landscape) {
}
/*==============================================================================
Nexus 7 || 601 x 906 || Default, Portrait and Landscape
================================================================================ */
#media screen and (width: 601px)
and (height: 906px){
}
#media screen and (width: 601px)
and (height: 906px) and (orientation: portrait) {
}
#media screen and (width: 601px)
and (height: 906px) and (orientation: landscape) {
}
/*==============================================================================
Nexus 9 || 1536 x 2048 || Default, Portrait and Landscape
================================================================================ */
#media screen and (width: 1536px) and (height: 2048px) {
}
#media screen and (width: 1536px)
and (height: 2048px) and (orientation: portrait) {
}
#media screen and (width: 1536px)
and (height: 2048px) and (orientation: landscape) {
}
/*==============================================================================
Kindle Fire HD 8.9 || 1200 x 1600 || Default, Portrait and Landscape
================================================================================ */
#media only screen and (min-width: 1200px)
and (max-width: 1600px){
}
#media only screen and (min-width: 1200px)
and (max-width: 1600px) and (orientation: portrait) {
}
#media only screen and (min-width: 1200px)
and (max-width: 1600px) and (orientation: landscape) {
}
Use this to make Responsive website
#media only screen and (max-width: 1200px) {
<!-- For Desktop -->
}
#media only screen and (max-width: 992px) {
<!-- For Laptop -->
}
#media only screen and (max-width: 767px) {
<!-- For Tab -->
}
#media only screen and (max-width: 480px) {
<!-- For Mobile -->
}
There is a need to scale media requests with one image (logo) for each mobile device: iPhone 5, 6, 6+, iPad's, as well as on large screens.
Accordingly, I almost need to specify a style in the form of width, etc. For portrait and landscape orientation.
Of all works only for the iPhone 6, iPad's and large screens (=> 1600px)
For small screens (320x480) and iPhone 6+ does not work (check in Chrome)
For iPhone 6+ media query applied as for iPhone 5...
Tell me please, what's wrong in my code?
I will be extremely grateful!
Here's the CSS:
#media only screen and (max-width: 320px) and (max-width : 480px) {
.logo-mobile img {
width: 150px;
transform: translateY(-7px);
}
}
#media only screen and (min-width: 321px) and (max-width : 480px) {
.logo-mobile img {
width: 150px;
transform: translateY(-7px);
}
}
#media only screen and (min-width: 320px) and (max-height: 568px) and
(orientation: landscape) and (-webkit-device-pixel-ratio: 2){
.logo-mobile img {
width: 144px;
transform: translateY(-7px);
}
}
#media only screen and (min-width: 320px) and (max-height: 568px) and
(orientation: portrait) and (-webkit-device-pixel-ratio: 2){
.logo-mobile img {
width: 144px;
transform: translateY(-7px);
}
}
#media only screen and (min-width: 375px) and (max-height: 667px) and
(orientation: landscape) and (-webkit-device-pixel-ratio: 2){
.logo-mobile img {
width: 144px;
transform: translateY(-8px);
}
}
#media only screen and (min-width: 375px) and (max-height: 667px) and
(orientation: portrait) and (-webkit-device-pixel-ratio: 2){
.logo-mobile img {
width: 100%;
transform: translateY(-11px);
}
}
#media only screen and (min-width: 414px) and (max-height: 736px) and
(orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
.logo-mobile img {
width: 144px;
transform: translateY(-8px);
}
}
#media only screen and (min-width: 414px) and (max-height: 736px) and
(orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
.logo-mobile img {
width: 144px;
transform: translateY(-8px);
}
}
#media only screen and (min-width: 768px) and (max-width: 1024px) and
(orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
.logo-mobile img {
width: 100%;
transform: translateY(-8px);
}
}
#media only screen and (min-width: 768px) and (max-width: 1024px) and
(orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
.logo-mobile img {
width: 100%;
transform: translateY(5px);
}
#media only screen and (min-width: 1600px) {
.logo-mobile img {`enter code here`
width: 100%;
}
}
Well you could start by ensuring you added the meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
You could also consider adding appropriate prefixes to your CSS3 selectors like so...
-webkit-transform: translateY(8px)//Chrome
-o-transform: translateY(8px) //Opera
and so on. You could check w3schools for a complete list of css3 prefixes. I hope this helps...
Hi I wrote media query to have responsive view of navbar in ipad. My media query is not working.
.nav-tabs>li>a {
color: #2b2b2b;
font-size: 13px;
line-height: 26px;
padding: 4px 12px;
outline: none;
margin-left: 50px;
position: relative;
display: block;
}
#media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
.nav-tabs>li>a {
color: #2b2b2b;
font-size: 13px;
line-height: 26px;
padding: 4px 12px;
outline: none;
position: relative;
display: block;
}
}
Any suggestions why it is not working?
device-width and device-height are both deprecated media features, you should use max(/min)-device-width and max(/min)-device-height instead.
You can check the list of available media features here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Chris Coyier at CSS-tricks wrote a really good - slightly outdated - reference for almost all devices. The code below relates to I-pads and how to specifically target them with CSS.
/* ----------- iPad mini ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
/* -- style goes here -- */
}
/* Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
/* -- style goes here -- */
}
/* Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
/* -- style goes here -- */
}
/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
/* -- style goes here -- */
}
/* Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
/* -- style goes here -- */
}
/* Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
/* -- style goes here -- */
}
/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
/* -- style goes here -- */
}
/* Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
/* -- style goes here -- */
}
/* Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
/* -- style goes here -- */
}
I'm trying to allow a container that holds five images per row to change the size of it's width if the browser width is smaller than the five images, including the margins etc.
I've added the following media query, and all works well when browsing on a desktop computer (resizing browser to less than 1080px in width)...The container changes width and the content is centered.
However, when browsing on mobile device (iPhone 4 and S4) it doesn't work. Thoughts?
CSS
.main-width {
margin: 20px auto;
max-width: 1080px;
min-width: 960px;
}
#media screen and (max-width: 1080px) {
.main-width {
max-width: 870px !important;
min-width: 870px !important;
}
}
This is likely because you don't have a viewport set.
Place the following meta tag in the <head> element of your document.
<meta name="viewport" content="width=device-width, initial-scale=1">
For more information, read "Using the viewport meta tag to control layout on mobile browsers " - (mdn)
You can use (max-device-width:1080px) instead. It passes viewport and applys on device width.
Give this a try this is a modified one that I use:
/* Media queries */
/* Desktop Resolutions */
/* 2k */
#media screen and (max-width: 2048px) {
}
/* 1080 HD */
#media screen and (max-width: 1920px) {
}
/* Wide SXGA/ Apple Powerbook G4 */
#media screen and (max-width: 1440px) {
}
/* HDTV 720p/1080i monitors */
#media only screen and (max-width: 1366px) {
}
#media only screen and (max-width: 1024px) {
}
#media only screen and (max-width: 768px) {
}
#media only screen and (max-width: 480px) {
}
#media only screen and (max-width: 320px) {
}
/* Device Width & Density */
/* iPad Mini */
#media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) {
}
/* iPad 2 and 3 Landscape */
#media (max-device-width: 1024px) and (orientation: landscape) {
}
/* iPad 2 and 3 Portrait */
#media (max-device-width: 768px) and (orientation: portrait) {
}
/* iPad 4 */
#media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
}
/* iPhone 4 */
#media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
}
/* iPhone 5 */
#media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
}
/* HTC One */
#media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
}
/* Samsung Galaxy S2 */
#media screen and (device-width: 320px) and (device-height: 534px) and (-webkit-device-pixel-ratio: 1.5) {
}
/* Samsung Galaxy S3 */
#media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) {
}
/* Samsung Galaxy S4 */
#media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
}
I'm trying to allow a container that holds five images per row to change the size of it's width if the browser width is smaller than the five images, including the margins etc.
I've added the following media query, and all works well when browsing on a desktop computer (resizing browser to less than 1080px in width)...The container changes width and the content is centered.
However, when browsing on mobile device (iPhone 4 and S4) it doesn't work. Thoughts?
CSS
.main-width {
margin: 20px auto;
max-width: 1080px;
min-width: 960px;
}
#media screen and (max-width: 1080px) {
.main-width {
max-width: 870px !important;
min-width: 870px !important;
}
}
This is likely because you don't have a viewport set.
Place the following meta tag in the <head> element of your document.
<meta name="viewport" content="width=device-width, initial-scale=1">
For more information, read "Using the viewport meta tag to control layout on mobile browsers " - (mdn)
You can use (max-device-width:1080px) instead. It passes viewport and applys on device width.
Give this a try this is a modified one that I use:
/* Media queries */
/* Desktop Resolutions */
/* 2k */
#media screen and (max-width: 2048px) {
}
/* 1080 HD */
#media screen and (max-width: 1920px) {
}
/* Wide SXGA/ Apple Powerbook G4 */
#media screen and (max-width: 1440px) {
}
/* HDTV 720p/1080i monitors */
#media only screen and (max-width: 1366px) {
}
#media only screen and (max-width: 1024px) {
}
#media only screen and (max-width: 768px) {
}
#media only screen and (max-width: 480px) {
}
#media only screen and (max-width: 320px) {
}
/* Device Width & Density */
/* iPad Mini */
#media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) {
}
/* iPad 2 and 3 Landscape */
#media (max-device-width: 1024px) and (orientation: landscape) {
}
/* iPad 2 and 3 Portrait */
#media (max-device-width: 768px) and (orientation: portrait) {
}
/* iPad 4 */
#media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
}
/* iPhone 4 */
#media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
}
/* iPhone 5 */
#media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
}
/* HTC One */
#media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
}
/* Samsung Galaxy S2 */
#media screen and (device-width: 320px) and (device-height: 534px) and (-webkit-device-pixel-ratio: 1.5) {
}
/* Samsung Galaxy S3 */
#media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) {
}
/* Samsung Galaxy S4 */
#media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
}