xcode and ipad media queries - css

Question

I've spent a few days tearing my hair out looking for a solution to ipad media queries with UIwebview.
I've tried device-aspect-ratio, different min / max widths or device-widths.
In Xcode the simulator or my Ipad seem to act as if they are Iphones.
A web page loaded into my domain acts correctly on the ipad.
it seems that the problem comes from xcode
i have
<meta name="viewport" content="width=device-width ">
in the html page
the css:
#media all
and (max-width: 667px)
{
body::before{ content: "phone fired"}
h1{
color: #F0F;
}
}
#media all
and (min-width: 768px)
and (max-width: 1024px)
{
body::before{ content: "ipad fired"}
h1{
color: #F0F;
}
}
If i take out min-width: 768px from the css, both Iphone and Ipad display Ipad fired, as the Iphone is within 1024px;
with min-width: 768px in place the Iphone acts correctly but the Ipad displays "phone fired". It acts as if it's width is less than 768px

Answer 1

What are your targeting devices?
Check your settings in Target => General => Devices
If you are targeting iPhone only, the app runs in iPhone mode on the iPad and you won't get a different device size here. So you'll need to select Universal, to natively target both.
This did the trick for me in my test project :-)
You should also use #media only screen when targeting screens. This may not be an issue at all, but it is somehow more correct.
You should use min-device-width instead of min-width, when checking for the with of the device.
Let me know if, this does not help you. Then I'll check out some more stuff.