I am facing an issue with Ipad and Android Tablets media Queries especially in landscape mode.
I need some help regarding with the proper media queries.
here are the media queries that I am using:
Android Landscape:
#media only screen and (min-device-width : 800px) and (max-device-width: 1280px) and (orientation : landscape) {}
Ipad Landscape:
#media only screen and (min-device-width : 768px) and (max-device-width: 1024px) and (orientation : landscape) {}
use
#media (min-width : 800px) and (max-width: 1280px) {}
#media (min-width : 768px) and (max-width: 1024px) {}
for reference
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
This work for android tab:
#media (min-device-width : 600px) and (max-device-width: 1024px) and (orientation : landscape) {}
and
#media (min-device-width : 600px) and (max-device-width: 1024px) and (orientation : portrait) {}
Related
I have done with my HTML website and completed responsive design using CSS media queries. Now if i made any changes in any devices means it is affecting another device view. So can anyone provide me a correct order of media queries to resolve my issue. I have mentioned my CSS media query code below.
/*Responsive CSS*/
#media only screen and (min-width : 768px) and (max-width : 1280px) { }
#media only screen and (min-device-width : 1281px) and (max-device-width : 1380px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) { }
/* 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) { }
#media only screen and (min-device-width: 411px) and (max-device-width : 823px) and (orientation: landscape) { }
/* iPad (Portrait & landscape) ----------- */
#media (max-width: 1024px) { }
/*Mobile Phones*/
#media (max-width: 767px) { }
/* ----------- 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) { }
/* Samsung Galaxy Note 3 */
#media screen and (min-device-width: 320px) and (min-device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {}
/* ----------- Galaxy S3 ----------- */
/* Portrait */
#media screen and (min-device-width: 320px) and (min-device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) { }
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait */
#media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { }
#media only screen and (min-device-width : 1024px) and (max-device-width : 1380px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {}
/* iPad Portrait */
#media only screen and (min-device-width:768px) and (max-device-width:1023px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) { }
/* ----------- iPhone X ----------- */
/* Landscape */
#media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { }
/* ----------- Galaxy S4, S5 and Note 3 ----------- */
/* Landscape */
#media screen and (min-device-width: 320px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {}
/* ----------- Galaxy S3 ----------- */
/* Landscape */
#media screen and (min-device-width: 320px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) { }
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Landscape */
#media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { }
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Landscape */
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { }
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Landscape */
#media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}
/* ----------- iPhone 4 and 4S ----------- */
/* Landscape */
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}
Make general media queries instead of exact queries for all kinds of devices.
This always helps out Media Queries, I'd suggest looking here just to get an idea/experiment with it first before you target all your elements.
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 -->
}
I have different media queries for different devices, each of them works fine (if I leave only 1 of them), but if I put all media queries in my code only query with for large screen devices forks fine.
this one works fine:
#media screen and (max-width: 1280px), screen and (max-height: 800px) {...}
and these don't work at all
#media screen and (max-width: 640px), screen and (max-height: 360px) {...}
#media screen and (max-width: 360px), screen and (max-height: 640px) {...}
I need to make media query for every device (including landscape and normal mode).
How should I do this?
#media (max-height: 640px) and (max-width: 360px) {
/* CSS stuff */
}
#media (max-height: 360px) and (max-width: 640px) {
/* CSS stuff */
}
try to do it like this.
add this if you havent
<meta name="viewport" content="width=device-width, initial-scale=1.0">
you can also nest queries
#media screen and (min-height: 40px) {
#media screen and (min-width: 50px) {
/*enter css here to apply for both condition*/
}
}
Visit this link. Media Queries For Standard Devices.
Sample:
/* ----------- Non-Retina Screens ----------- */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- Retina Screens ----------- */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
}
See this too.
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen and (min-width: 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width: 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* Styles */
}
/* 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 */
}
/**********
iPad 3
**********/
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen and (min-width: 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen and (min-width: 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 5 ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
#media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 6 ----------- */
#media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
#media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 6+ ----------- */
#media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
#media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* Samsung Galaxy S3 ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* Samsung Galaxy S4 ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
/* Styles */
}
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
/* Styles */
}
/* Samsung Galaxy S5 ----------- */
#media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
/* Styles */
}
#media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
/* Styles */
}
I am very new to web-front-end-development and I'm trying to develop a responsive website. I have decided on 5 breakpoints, i.e. mobile(2-portrait-landscape) from 320px-768px, tablets(2-portrait-landscape) from 769px-1024px, Desktop-Small from 1025px-1280px, Desktop-Medium from 1281px-1366px, Desktop-Large from 1367px-1680px and Desktop-ExtraLarge from 1681px-Above.
When I tested my first layout, developed on a Mac-Retina-13", the site looked reasonably okay on Safari & Chrome. But, it completely got distorted on an Acer-Windows-15", on Firefox & Chrome.
Then with some research I got to know about http://mydevice.io/ and Device-pixel-ratios.
I would like to know, in order to have a consistent viewing experience, across device regardless of the device resolutions & screen sizes, will I be using the following media queries?
/* Phones - portait */
#media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 96dpi) {
}
#media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 144dpi){
}
#media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 192dpi){
}
#media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 288dpi){
}
#media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 384dpi){
}
/* Phones - landscape */
#media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 96dpi) {
}
#media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 144dpi) {
}
#media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 192dpi) {
}
#media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 192dpi) {
}
#media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 288dpi) {
}
#media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 384dpi) {
}
/* Tablets - Portrait */
#media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) and (min-resolution: 96dpi) {
}
#media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) and (min-resolution: 192dpi) {
}
/* Tablets - Landscape */
#media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) and (min-resolution: 96dpi) {
}
#media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) and (min-resolution: 192dpi) {
}
/* Desktop - Small */
#media only screen and (min-width: 1025px) and (max-width: 1280px) and (min-resolution: 96dpi) {
}
#media only screen and (min-width: 1025px) and (max-width: 1280px) and (min-resolution: 192dpi) {
}
/* Desktop - Medium */
#media only screen and (min-width: 1281px) and (max-width: 1366px) and (min-resolution: 96dpi) {
}
#media only screen and (min-width: 1281px) and (max-width: 1366px) and (min-resolution: 192dpi) {
}
/* Desktop - Large */
#media only screen and (min-width: 1367px) and (max-width: 1680px) and (min-resolution: 96dpi) {
}
#media only screen and (min-width: 1367px) and (max-width: 1680px) and (min-resolution: 192dpi) {
}
/* Desktop - ExtraLarge */
#media only screen and (min-width: 1681px) and (min-resolution: 96dpi) {
}
#media only screen and (min-width: 1681px) and (min-resolution: 192dpi) {
}
Will I have to use these 23 media-queries? Am I going wrong somewhere?
Here's a sample of desired outputResponsive Site Layout
can you post a link to the website or a link to a jfiiddle with your code? or edit your question and hit CTRL + M and paste all of your code into the snipet box that opens? If you use the Bootstrap code your site will be mobile responsive. If you are coding it yourself use these http://codepen.io/mlegg10/pen/JKdOaj
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* 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 */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
/* 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)
{ }
/* 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)
{ }
/* 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)
{ }
/* 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)
{ }
/* 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)
{ }
/* Apple Watch */
#media
(max-device-width: 42mm)
and (min-device-width: 38mm)
{ }
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am working on a responsive web page, how can I make it to adjust proportionally to different screen sizes specifically target a tablet size and a larger screen in css.
Use this. Add all of the code to the bottom of your css page.
[
/*
Based on:
1. http://stephen.io/mediaqueries
2. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
*/
/* iPhone 6 in portrait & landscape */
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {
}
/* iPhone 6 in landscape */
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) {
}
/* iPhone 6 in portrait */
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) {
}
/* iPhone 6 Plus in portrait & landscape */
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) {
}
/* iPhone 6 Plus in landscape */
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape) {
}
/* iPhone 6 Plus in portrait */
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : portrait) {
}
/* iPhone 5 & 5S in portrait & landscape */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
}
/* iPhone 5 & 5S in landscape */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
}
/* iPhone 5 & 5S in portrait */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
}
/*
iPhone 2G, 3G, 4, 4S Media Queries
It's noteworthy that these media queries are also the same for iPod Touch generations 1-4.
*/
/* iPhone 2G-4S in portrait & landscape */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}
/* iPhone 2G-4S in landscape */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) {
}
/* iPhone 2G-4S in portrait */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait) {
}
/* iPad in portrait & landscape */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
}
/* iPad in landscape */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
}
/* iPad in portrait */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
}
/* Galaxy S3 portrait and landscape */
#media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) {
}
/* Galaxy S3 portrait */
#media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Galaxy S3 landscape */
#media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* Galaxy S4 portrait and landscape */
#media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Galaxy S4 portrait */
#media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Galaxy S4 landscape */
#media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* Galaxy S5 portrait and landscape */
#media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Galaxy S5 portrait */
#media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Galaxy S5 landscape */
#media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* HTC One portrait and landscape */
#media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* HTC One portrait */
#media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* HTC One landscape */
#media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/*
iPad 3 & 4 Media Queries
If you're looking to target only 3rd and 4th generation Retina iPads
(or tablets with similar resolution) to add #2x graphics,
or other features for the tablet's Retina display, use the following media queries.
*/
/* Retina iPad in portrait & landscape */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Retina iPad in landscape */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Retina iPad in portrait */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/*
iPad 1 & 2 Media Queries
If you're looking to supply different graphics or choose different typography
for the lower resolution iPad display, the media queries below will work
like a charm in your responsive design!
*/
/* iPad 1 & 2 in portrait & landscape */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* iPad 1 & 2 in landscape */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* iPad 1 & 2 in portrait */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* iPad mini in portrait & landscape */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* iPad mini in landscape */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* iPad mini in portrait */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Galaxy Tab 10.1 portrait and landscape */
#media
(min-device-width: 800px)
and (max-device-width: 1280px) {
}
/* Galaxy Tab 10.1 portrait */
#media
(max-device-width: 800px)
and (orientation: portrait) {
}
/* Galaxy Tab 10.1 landscape */
#media
(max-device-width: 1280px)
and (orientation: landscape) {
}
/* Asus Nexus 7 portrait and landscape */
#media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332) {
}
/* Asus Nexus 7 portrait */
#media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: portrait) {
}
/* Asus Nexus 7 landscape */
#media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: landscape) {
}
/* Kindle Fire HD 7" portrait and landscape */
#media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Kindle Fire HD 7" portrait */
#media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}
/* Kindle Fire HD 7" landscape */
#media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
}
/* Kindle Fire HD 8.9" portrait and landscape */
#media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Kindle Fire HD 8.9" portrait */
#media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}
/* Kindle Fire HD 8.9" landscape */
#media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
}
/* Laptops non-retina screens */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Laptops retina screens */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
}
/* Apple Watch */
#media
(max-device-width: 42mm)
and (min-device-width: 38mm) {
}
/* Moto 360 Watch */
#media
(max-device-width: 218px)
and (max-device-height: 281px) {
}
][1]