I am trying to make the Ipad Pro resposnsive. It all looks normal on the mobile emulator but wehen I test the Ipad on Xcode, the background is completely wrong. When I look in Chrome, it is using the media queries properly but in safari, it doesn't even acknowledge it for the Ipad Pro. Here is my code:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#media only screen
and (min-width: 1366px)
and (max-width: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}
#media only screen
and (min-width: 1024px)
and (max-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
Fixed it:
#media only screen
and (min-width: 1366px)
and (max-width: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1.5) { /* changed to 1.5*/
}
#media only screen
and (min-width: 1024px)
and (max-width: 1024px)
and (orientation: portrait)
**and (-webkit-min-device-pixel-ratio: 1.5)** { /* changed to 1.5*/
}
Related
Im using the following Media query to target Ipad Pro 12.9
#media only screen and (max-device-width: 1366px) and (min-device-width: 1024px) and (orientation: landscape) and (webkit-min-device-pixel-ratio: 2) {}
It works on the browser simulator, but when I try the actual device, the landscape view looks the same as a regular desktop. It works fine in portrait but ignores the landscape view media query.
Do you guys know of a way to fix this?
Try using separate media queries. One for landscape, one for portrait, one for both.
/* Portrait and Landscape */
#media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Portrait */
#media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Landscape */
#media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
I have a problem with my media queries. I finished my responsive website and everything was ok on desktop, Android and Windows Phone devices. I asked my friends to check if it's ok on their iPhones and I got supriesed, because their iPhones (with iOS 10) are ignoring my media queries.
How it's possible? Problem is only on iPhones (5,5s,6,6s+). When I scale website in Chrome, everything is fine.
I have meta viewport tag in my head section.
This is my media query:
#media (min-device-width: 220px) and (max-device-width: 480px)
{
/*my styling*/
}
#necilAlbayrak is right. Here you have correct media queries for iphones
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* 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 6 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* 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 6+ ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}
Source: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
try : (added screen)
#media screen (min-device-width: 220px) and (max-device-width: 480px)
{
/*my styling*/
}
PLUS, add this to your HTML in every responsive page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
can you try using min-width and max-width instead of device width. sometimes device-width does not match viewport.
#media screen (min-width: 220px) and (max-width: 480px)
do you even add meta tag like that can you check it ?
<meta name="viewport" content="width=device-width">
Does anyone know specific screen sizes to target media queries for iPhone 6 and 6 Plus?
Also, the icon sizes and splash screens?
iPhone 6
Landscape
#media only screen
and (min-device-width : 375px) // or 213.4375em or 3in or 9cm
and (max-device-width : 667px) // or 41.6875em
and (width : 667px) // or 41.6875em
and (height : 375px) // or 23.4375em
and (orientation : landscape)
and (color : 8)
and (device-aspect-ratio : 375/667)
and (aspect-ratio : 667/375)
and (device-pixel-ratio : 2)
and (-webkit-min-device-pixel-ratio : 2)
{ }
Portrait
#media only screen
and (min-device-width : 375px) // or 213.4375em
and (max-device-width : 667px) // or 41.6875em
and (width : 375px) // or 23.4375em
and (height : 559px) // or 34.9375em
and (orientation : portrait)
and (color : 8)
and (device-aspect-ratio : 375/667)
and (aspect-ratio : 375/559)
and (device-pixel-ratio : 2)
and (-webkit-min-device-pixel-ratio : 2)
{ }
if you prefer you can use (device-width : 375px) and (device-height: 559px) in place of the min- and max- settings.
It is not necessary to use all of these settings, and these are not all the possible settings. These are just the majority of possible options so you can pick and choose whichever ones meet your needs.
User Agent
tested with my iPhone 6 (model MG6G2LL/A) with iOS 9.0 (13A4305g)
# Safari
Mozilla/5.0 (iPhone; CPU iPhone OS 9_0 like Mac OS X) AppleWebKit/601.1.39 (KHTML, like Gecko) Version/9.0 Mobile/13A4305g Safari 601.1
# Google Chrome
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.53.11 (KHTML, like Gecko) Version/5.1.3 Safari/534.53.10 (000102)
# Mercury
Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_4 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11B554a Safari/9537.53
Launch images
750 x 1334 (#2x) for portrait
1334 x 750 (#2x) for landscape
App icon
120 x 120
iPhone 6+
Landscape
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio : 3)
{ }
Portrait
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (device-width : 414px)
and (device-height : 736px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 3)
and (-webkit-device-pixel-ratio : 3)
{ }
Launch images
1242 x 2208 (#3x) for portrait
2208 x 1242 (#3x) for landscape
App icon
180 x 180
iPhone 6 and 6+
#media only screen
and (max-device-width: 640px),
only screen and (max-device-width: 667px),
only screen and (max-width: 480px)
{ }
Predicted
According to the Apple website the iPhone 6 Plus will have 401 pixels-per-inch and be 1920 x 1080. The smaller version of the iPhone 6 will be 1334 x 750 with 326 PPI.
So, assuming that information is correct, we can write a media query for the iPhone 6:
#media screen
and (min-device-width : 1080px)
and (max-device-width : 1920px)
and (min-resolution: 401dpi)
and (device-aspect-ratio:16/9)
{ }
#media screen
and (min-device-width : 750px)
and (max-device-width : 1334px)
and (min-resolution: 326dpi)
{ }
Note that device-aspect-ratio will be deprecated in http://dev.w3.org/csswg/mediaqueries-4/ and replaced with aspect-ratio
Min-width and max-width may be something like 1704 x 960.
Apple Watch (speculative)
Specs on the Watch are still a bit speculative since (as far as I'm aware) there has been no official spec sheet yet. But Apple did mention in this press release that the Watch will be available in two sizes.. 38mm and 42mm.
Further assuming.. that those sizes refer to the screen size rather than the overall size of the Watch face these media queries should work.. And I'm sure you could give or take a few millimeters to cover either scenario without sacrificing any unwanted targeting because..
#media (!small) and (damn-small), (omfg) { }
or
#media
(max-device-width:42mm)
and (min-device-width:38mm)
{ }
It's worth noting that Media Queries Level 4 from W3C currently only available as a first public draft, once available for use will bring with it a lot of new features designed with smaller wearable devices like this in mind.
This is what is working for me right now:
iPhone 6
#media only screen and (max-device-width: 667px)
and (-webkit-device-pixel-ratio: 2) {
iPhone 6+
#media screen and (min-device-width : 414px)
and (-webkit-device-pixel-ratio: 3)
This works for me for the iphone 6
/*iPhone 6 Portrait*/
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
}
/*iPhone 6 landscape*/
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {
}
/*iPhone 6+ Portrait*/
#media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {
}
/*iPhone 6+ landscape*/
#media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {
}
/*iPhone 6 and iPhone 6+ portrait and landscape*/
#media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){
}
/*iPhone 6 and iPhone 6+ portrait*/
#media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){
}
/*iPhone 6 and iPhone 6+ landscape*/
#media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){
}
Just so you know the iPhone 6 lies about it's min-width. It thinks it is 320 instead of 375 it is suppose to be.
#media only screen and (max-device-width: 667px)
and (-webkit-device-pixel-ratio: 2) {
}
This was the only thing I could get to work to target the iPhone 6. The 6+ works fine the using this method:
#media screen and (min-device-width : 414px)
and (max-device-height : 736px) and (max-resolution: 401dpi)
{
}
iPhone X
/* Portrait and Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
/* uncomment for only portrait: */
/* and (orientation: portrait) */
/* uncomment for only landscape: */
/* and (orientation: landscape) */ {
}
iPhone 6+, 7+ and 8+
/* Portrait and Landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
/* uncomment for only portrait: */
/* and (orientation: portrait) */
/* uncomment for only landscape: */
/* and (orientation: landscape) */ {
}
iPhone 6, 6S, 7 and 8
/* Portrait and Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
/* uncomment for only portrait: */
/* and (orientation: portrait) */
/* uncomment for only landscape: */
/* and (orientation: landscape) */ {
}
Source: Media Queries for Standard Devices
You have to target screen size using media query for different screen size.
for iphone:
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio : 2)
{ }
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2)
{ }
and for desktop version:
#media only screen (max-width: 1080){
}
For iPhone 5,
#media screen and (device-aspect-ratio: 40/71)
for iPhone 6,7,8
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait)
for iPhone 6+,7+,8+
#media screen and (-webkit-device-pixel-ratio: 3) and (min-device-width: 414px)
Working fine for me as of now.
Im working with a site with 3 views for desktop and iPad, both orientation one view,
and for iPhone/iPod a different one, the third is a warning to turn you device portrait, due the graphics can be better appreciated on that orientation, the issue is iPhone5 landscape gets a little of the iPad version, and with a little i mean it gets hide most of the stuffs but it doesn't show me the warning to rotate the device, any ideas or advice, this are the media queries.
/* ---------- iPhone/iPod Only Portrait ---------- */
#import url('../css/portrait.css') only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait);
/* ---------- Retina iPhone/iPod Only Portrait ---------- */
#import url('../css/portrait.css') only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) and (min-device-pixel-ratio : 2) and (max--moz-device-pixel-ratio: 2);
/* ---------- Non Retina iPhone/iPod Only Portrait ---------- */
#import url('../css/portrait.css') only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) and (min-device-pixel-ratio : 1) and (max--moz-device-pixel-ratio: 1);
/* ---------- iPhone5 portrait Only ---------- */
#import url('../css/portrait.css') only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) and (min-device-pixel-ratio : 2) and (max--moz-device-pixel-ratio: 2);
/* ---------- iPhone/iPod Only Landscape ---------- */
#import url('../css/landscape.css') only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape);
/* ---------- Retina iPhone/iPod Only landscape ---------- */
#import url('../css/landscape.css') only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) and (min-device-pixel-ratio : 2) and (max--moz-device-pixel-ratio: 2);
/* ---------- Non Retina iPhone/iPod Only landscape ---------- */
#import url('../css/landscape.css') only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) and (min-device-pixel-ratio : 1) and (max--moz-device-pixel-ratio: 1);
/* ---------- iPhone5 landscape Only ---------- */
#import url('../css/landscape.css') only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) and (min-device-pixel-ratio : 2) and (max--moz-device-pixel-ratio: 2);
/* ---------- iPad Only Portrait---------- */
#import url('../css/style_respond.css') only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait);
/* ---------- iPad Portrait Retina Device Only ---------- */
#import url('../css/style_respond.css') only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2)and (min-device-pixel-ratio : 2) and (max--moz-device-pixel-ratio: 2);
/* ---------- iPad Portrait Non Retina Device Only ---------- */
#import url('../css/style_respond.css') only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1)and (min-device-pixel-ratio : 1) and (max--moz-device-pixel-ratio: 1) ;
/* ---------- iPad Only landscape---------- */
#import url('../css/style_respond.css') only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape);
/* ---------- iPad landscape Retina Device Only ---------- */
#import url('../css/style_respond.css') only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-max-device-pixel-ratio: 2)and (min-device-pixel-ratio : 2) and (max--moz-device-pixel-ratio: 2) ;
/* ---------- iPad landscape Non Retina Device Only ---------- */
#import url('../css/style_respond.css') only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-max-device-pixel-ratio: 1)and (min-device-pixel-ratio : 1) and (max--moz-device-pixel-ratio: 1) ;
#import url('../css/style_respond.css') screen and (orientation:landscape) and (min-width: 1024px);
Why are you using this with #import? Import css is not considered as efficient as #media screen method in same css file. You can define all responsive (either landscape or portrait ) rules for all devices(either iPhone, iPad or Desktop) within the same stylesheet.
Try this out for basic guidelines Web Designer Blog on Mediaqueries..
And after that get all the device specific like- iPhone 5 as well as iPad, gist from here.
Hope these'll hep you.
I am trying to select an area between 767px, and 1024px.
I want this to apply to the screen, iPad portrait, but NOT iPad landscape.
These are some queries that I have tried with no success.
#media only screen and (max-device-width: 1024px) and (orientation: portrait),
screen and (min-width: 767px) and (max-width: 1024px) { ... }
Problem lies with the iPad landscape falls within the query of 767 and 1024, so I don't know how to exclude the iPad landscape specific viewport.
how about:
<link rel="stylesheet" media="screen (max-device-width: 1024px) and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="screen (max-device-width: 1024px) and (orientation:landscape)" href="landscape.css" />
so then do this:
so <style #media screen (max-device-width: 1024px) and (orientation:portrait){ /** portrait / } #media screen (max-device-width: 1024px) and (orientation:landscape){ / landscape **/ } </style>
i'm not sure what you mean...those do that. either way, here's another solution so you can exclude iPad Landscape /* 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 */
}