I've developed this page:
http://bluebeam.com/us/support/ipad/
The media queries are working fine in every browser but when I test it on an ipad it does nothing... It just reverts back to normal CSS. I've cleared browsing data on the iPad without results. I can see it working on my iPhone.
Can anyone spot an issue with my code?
Edit: the first query (horizontal layout) is working. But the second is not triggering when I flip the ipad (vertical layout).
If I remember correctly the iPad swaps the width/height values when the orientation changes. I would try this:
/* portrait*/
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
/* landscape */
#media only screen
and (min-device-width : 1024px)
and (max-device-width : 768px)
Its been a year since I faced a similar problem so I could be a bit behind the times.
Related
I've been using Apple's Xcode tool (iOS Simulator) to code iPad views. I can't target landscape view on the iPad Retina device.
I've been trying the following media queries...
#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// }
#media only screen and (min-device-width : 1536px) and (max-device-width
: 2048px) and (orientation : landscape) and ( -webkit-min-device-
pixel-ratio: 2){ //style goes here// }
I can't find any other way to target the landscape view in iPad Retina. I have even tried this code in different parts of the CSS file, still no luck at all.
The first one is correct, i use the same media query and is working on a real device.
Maybe you forgot to include the meta viewport?
I've just realized my FTP program was not working correctly when I entered the editor inside the Wordpress dashboard (the query was not there) so I manually wrote it dawn directly on my theme's CSS file and it worked.This FTP program stole hours from me.. but the query was right and the meta tag as well.
All in all, for anyone experiencing issues while coding new iPads Retina displays (32 and 64 bits), they should include the meta viewport in their headers:
<meta name="viewport" content="width=device-width, user-scalable=no">
and the corresponding query (Landscape view, in this case)is:
#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// }
background-size:cover does not seem to work on iPhone 3. I've read somewhere that using background-size:100%; instead should solve the problem, and it does. However, it makes the background on Iphone 4 look ugly.
I've searched on the internet but all I find are queries for both the Iphone 3 and 4. Is there a media query for JUST the iPhone 3?
EDIT: I posted my solution in the answer below
I found a solution for my problem.
This blog post has a list of media queries for specific iPhone versions.
<!-- iPhone 2G, 3G, 3GS Portrait -->
#media only screen and (device-width: 320px) and (orientation: portrait) and not (-webkit-min-device-pixel-ratio: 2) {
/* CSS3 Rules for iPhone in Portrait Orientation */
}
<!-- iPhone 2G, 3G, 3GS Landscape -->
#media only screen and (device-width: 480px) and (orientation: landscape) and not (-webkit-min-device-pixel-ratio: 2) {
/* CSS3 Rules for iPhone in Landscape Orientation */
}
As you can see it only targets up to 3GS.
I'm working on a responsive site and I want to make the site react to the browser being made less than 1024px wide, and use those same styles for the iPad in Portrait.
However, if I apply a media query for styles when the browser is less than 1024 px like this
#media only screen and (max-width : 1024px) { /* styles */ }
They affect the iPad in Landscape which I don't want - how can I exclude the landscape iPad but include the Portrait iPad ?
Try this:
#media only screen and (max-width : 768px) { /* styles */ }
iPad's width in portrait is 768px.
I'm new to web development and responsive design, so this might be an idiotic question. Unfortunately, I have searched and searched and cannot find an answer.
When I write a media query for Kindle Fire landscape, it effects the iPad landscape and vice versa. I cannot separate them. I have tried many things and nothing works.I don't have a problem in portrait mode or with other devices. I assume this is a problem here because the resolutions overlap, but I thought the code below would make them mutually exclusive. It doesn't.
Kindle landscape
#media screen and (min-width: 600px) and (max-width: 1024px){ #help{color: red;}}
iPad landscape
#media screen and (min-width: 768px) and (max-width: 1024px){/default color is white for desktop version so I don't specify the color in this query/ }}
The code above will make iPad #help red. If I reverse the order and put iPad first and Kindle second, then #help is white in Kindle.
And this code below makes the iPad landscape look fine, but Kindle is all broken.
#media screen and (max-width: 1024px){ /code/;}}
What am I doing wrong??? How do I write code so that I can make my website look right on Kindle without messing up the iPad? Do I need something else, like javascript?
I'm currently try to create proper #media queries to target 3 different device groups: phones, tablets and desktops
I use the following mixin in SASS to get it done:
#mixin respond-to($media) {
#if $media == phones {
#media only screen and (max-width: 320px) { #content; }
}
#else if $media == tablets {
#media only screen and (min-width: 321px) and (max-width: 979px) { #content; }
}
#else if $media == desktops {
#media only screen and (min-width: 980px) { #content; }
}
}
This actually works pretty well for most devices i have around.
BUT i have an iPad 2 here and tried the site with Safari and the following happens:
in portrait mode everything is fine. it will be handled by the "tablet" group as it should be.
in landscape mode (when it has 1024px width to work with) it will still fall into the tablet group. But it shouldnt as my layout works perfectly on screens wider than 980px.
As i found out the iOS devices always report their screen size as they were in portrait mode (actually a stupid idea) which in my case is 768x1024. With the media queries above it will never end up in the non-tablet section when its in landscape.
is there a way to exclude the ipad 2 in landscape mode from the tablet query WITHOUT disturbing other devices (like androids which behave correctly)?
Otherwise i have to target every device seperatly with their own strict media query which i want to avoid.
I bet the problem is due to your viewport meta tag. The following is what I use on all responsive sites:
<meta name="viewport" content="width=device-width, initial-scale=1">