I'm using a couple of media queries that target iPad and iPhone in landscape as well as portrait orientation, but as of iOS 7 they don't work anymore. They worked perfectly in iOS 6, though. Has anyone had any similar experiences?
Make sure all of your media queries and properties have been closed prior to your iPad query. Below is an example of the two queries I use to determine iPad and orientation:
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}
or
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){}
You should try this:
//iPhone 7 in portrait & landscape
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) { /* STYLES GO HERE */}
//iPhone 7 in landscape
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) { /* STYLES GO HERE */}
//iPhone 7 in portrait
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) { /* STYLES GO HERE */ }
And for the iPhone 7 Plus:
//iPhone 7 Plus in portrait & landscape
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) { /* STYLES GO HERE */}
//iPhone 7 Plus in landscape
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape) { /* STYLES GO HERE */}
//iPhone 7 Plus in portrait
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : portrait) { /* STYLES GO HERE */ }
Related
I just wrote a media query for phone displays and it's not applying. The code in question is below. For better context, my github page is here. What I'd like is for the food pics to stack and take up the entire width of the screen as seen in the first pic at the bottom.
#media only screen and (max-width: 480px) {
.food {
height: 265px;
width: 400px;
padding: 0rem;
position: relative;
top: 7rem;
}
}
The media query actually displays somewhat properly when I resize my desktop browser (first pic), but does not work at all on my iPhone 6 (second pic) -- the images are flanked by sizable margins and don't fill the screen. I say "somewhat properly" because there is a large right margin for when the media query applies on the desktop browser -- you'll see it when you resize your browser when the media query takes effect. Not sure why that's happening either. I have a hunch it has to do with how I have my flexbox set up, but I'm not sure.
Here's what I've tried:
-Using the <meta name="viewport" content="width=device-width,initial-scale=1"> meta tag
-Setting the media query to portrait orientation.
Thanks for any help you can provide!
Try to remove only from your media query and write it like this instead:
#media screen and (max-width: 480px) {
}
Also max-width: 480px, does not match with the size of the iPhone 6 screen size. See the following specifications for the actual screen size:
(min-width : 375px) // or 213.4375em or 3in or 9cm
(max-width : 667px) // or 41.6875em
You are using fixed width and heigth for that image class on your Github page, which isn't good for that purpose (small screens).
In the CSS rule for .food, change width to 100%, height to auto (to keep the image proportions intact) and add box-sizing: border-box to include the padding into the 100% width. (Or set padding to 0 if you really want the images to span the whole width)
Here's some breakpoints you can use in your code for different devices & orientations:
/* 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 */
}
Used crossbrowser testing and my website works on almost every single device. On an android tablet the same size as an iPad tablet...my site displays correctly on the android but not the ipad. Can using bad break points in media queries cause this?
Add all of these media queries to your css and it will work
/*
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) {
}
My media query is not working for 768px ipad portrait.
If I change for min-width works perfect but affects the size when is on desktop version or some another resolution more than 769px
#media only screen and (max-width: 768px) {
.sidebar-container.pressed .content-container {
width: 93% !important;
}
}
Someone can explain me that, and help how to solve? I just want make it work on 768px.
Thanks
iPhone 6 Media Queries
/* iPhone 6 in portrait & landscape */
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) { /* STYLES GO HERE */}
/* iPhone 6 in landscape */
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) { /* STYLES GO HERE */}
/* iPhone 6 in portrait */
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) { /* STYLES GO HERE */ }
iPhone 6 Plus Media Queries
/* iPhone 6 Plus in portrait & landscape */
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) { /* STYLES GO HERE */}
/* iPhone 6 Plus in landscape */
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape) { /* STYLES GO HERE */}
/* iPhone 6 Plus in portrait */
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : portrait) { /* STYLES GO HERE */ }
iPhone 5 & 5S Media Queries
/* iPhone 5 & 5S in portrait & landscape */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) { /* STYLES GO HERE */}
/* iPhone 5 & 5S in landscape */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) { /* STYLES GO HERE */}
/* iPhone 5 & 5S in portrait */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) { /* STYLES GO HERE */ }
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) { /* STYLES GO HERE */}
/* iPhone 2G-4S in landscape */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) { /* STYLES GO HERE */}
/* iPhone 2G-4S in portrait */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait) { /* STYLES GO HERE */ }
iPad
/* iPad in portrait & landscape */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* 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 */}
/* iPad in portrait */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }
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) { /* STYLES GO HERE */}
/* 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) { /* STYLES GO HERE */}
/* 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) { /* STYLES GO HERE */ }
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){ /* STYLES GO HERE */}
/* 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) { /* STYLES GO HERE */}
/* 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) { /* STYLES GO HERE */ }
iPad mini
/* 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) { /* STYLES GO HERE */}
/* 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) { /* STYLES GO HERE */}
/* 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) { /* STYLES GO HERE */ }
Source:
http://stephen.io/mediaqueries/#iPad
For iPads in portrait mode it is generally best to be more specific in the media queries, so try something like this:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles Here */
}
This way you target devices with screen width between 768px and 1024px which is what the iPad is, then you filter your targets by specifying the orientation as portrait.
You could try something like this - reducing the max-width - to minimize any other screens that it could effect, but I haven't tried it so can't verify it works.
#media only screen
and (min-device-width : 768px)
and (max-device-width : 770px)
and (orientation : portrait) {
/* Styles Here */
}
I want to change the css style according to devices.
I wrote like this
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Content/Destop.css")"
media="only screen and (min-width : 1224px) "/>
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Content/iphone.css")"
media="only screen and (max-device-width: 480px) "/>
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Content/ipad.css")"
media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) "/>
But it works only destop.
Ipad and Iphone didn't load the style sheet.
Please tell me what is the wrong with mu code.
You can do this with media queries. Below details will definitely helps you to acheive this.
iPad in portrait & landscape
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* 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 */}
iPad in portrait
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }
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) { /* STYLES GO HERE */}
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) { /* STYLES GO HERE */}
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) { /* STYLES GO HERE */ }
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){ /* STYLES GO HERE */}
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) { /* STYLES GO HERE */}
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) { /* STYLES GO HERE */ }
Reference : http://stephen.io/mediaqueries/
We are designing a template for a mobile site and we got to the problem where we don't know what size a logo should be, or the background, etc.
We will use the Jquery mobile API and HTML5 / CSS3 which basically allows us to create the whole architecture of the site without worrying about the dimensions, but in terms of external assets like backgrounds and images we don't know what is the best size in order to be more compatible with most devices.
The iPhone 4S/5 has a high-resolution screen that's 640 pixels wide. Many Android smartphones top out at 720px wide, although some go up to 800px. Anything over that is probably considered a tablet.
The best thing you can do as far as wide compatibility, then, is a single CSS style:
img { max-width: 100%; height: auto; }
This will ensure that no matter what resolution the screen is, your images will be no larger than the element containing it. (When building a responsive site with mobile users in mind, your element widths, margins and padding should all be computed as percentages whenever possible.) Obviously it also means that you're downloading more image data than many phones will need, but if you're dealing with two-color logos, it's not much of a difference. As always, keep your images as few and as small as possible.
In addition, if you're not dealing with photos, you should look at SVG images. Since they're vector-based, they resize perfectly at any resolution, and they're compatible with pretty much every browser except IE8 and Android 2.x.
I am sure that the image size normally should not be more like it defines CSS media query standart.
This is a short list of CSS media query for the most popular devices of 2015-2016.
Just add into this list media quieres for new devices if you need.
/* 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 */
}
And also take a look at the older lists https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ and https://gist.github.com/hs0ucy/3762901
Consider following html code:
<img src="images/myimage.jpg" alt="image">
Taking a look at that example, we would need multiple images depending on the screen size. As most browsers look at the HTML document first and preload images before they load Javascript, Javascript wouldn't be a perfect solution.
That's why: use a responsive image server!
I've used Sencha.io Src, which will figure out the device screen and shrink (it only shrinks images) your image to fit its screensize constraints. Sencha.io uses the browsers useragent string to look up the device in it's database. Than it shrinks your image to the maximum width of your device and stores it in a cache which will be available for 30 minutes.
Use it like that:
<img src="http://src.sencha.io./http://[your domain and path]/images/myimage.jpg" alt="image">
PS: It also has it shortcomes: it relies on device detection and requires you to route all your images through a third party. But as they are no great solutions at the moment (even with media queries you'll have to deal with browsers, which download resources inside a media query that doesn't apply) - I hope that this will help you out!
You have to use CSS media queries for this.
Take a look of this article here: http://davidwalsh.name/image-max-width
/* iphone */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
img { max-width: 100%; }
}
/* ipad */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
img { max-width: 100%; }
}