Using CSS3 Media Queries to target the iPhone
Pelle
http://www.css3.info/preview/media-queries.htmlhttp://www.css3.info/preview/media-queries.html
The CSS Spec itself is here:
http://www.w3.org/TR/css3-mediaqueries/
The great thing is that Safari/3 supports it and therefore iPhone as
well (hopefully).
Anyway it seems like an interesting way of targeting not just the
iphone, but also specific horizontal/vertical modes.
I posted a short example on my blog here about how it possibly could
be used:
Has anyone else used these definitely new selectors before?
Pelle
Christopher Allen
Apple gave us more specifics on this specific feature at WWDC, but
unfortunately, it was all under NDA so we've not been able to talk
about. I would presume that we can talk about it more on Friday or
sooner if Apple releases some iPhone docs this week.
I will say that some of what they've done isn't quite what you'd
expect, because they don't think of the iPhone as a "handheld" because
of the desktop class browser, and there are also some tricks tthey
recommend for compatibilty with CSS2.
-- Christopher Allen
Christopher Allen
Apple doesn't support the handheld profile, as it tries to emulate a
"desktop class" browser without the limitations of most handheld
browsers today.
So instead of using the handheld profile as you propose in your blog,
Apple recommends to use the following instead. Also, it includes a
trick so that CSS2 mediaqueries will still work right:
<link rel="stylesheet" media="only screen and
(max-device-width:480px)" href="small-devices.css" type="text/css" />
<link rel="stylesheet" media="screen and (min-device-width:481 px)"
href="not-small device.css">
The other trick you can do, useful if your font size isn't working
quite right on the iPhone, is to use the special style
-webkit-text-size-adjust.
<tag style="-webkit-text-size-adjust:none">
<tag style="-webkit-text-size-adjust:auto"> (this is the default)
<tag style="-webkit-text-size-adjust:200%">
There may be some other -webkit styles that we will learn about once
docs are out.
My personal belief is that web developers should first attempt to see
if they can get iPhone specific pages by create two different CSS
files and/or -webkit style changes using the methods above, before
going so far as to to use user agent checking to deliver different
html files.
-- Christopher Allen
Shannon Appelcline
<Christoph...@iPhoneWebDev.com> wrote:
> So instead of using the handheld profile as you propose in your blog,
> Apple recommends to use the following instead. Also, it includes a
> trick so that CSS2 mediaqueries will still work right:
>
> <link rel="stylesheet" media="only screen and
> (max-device-width:480px)" href="small-devices.css" type="text/css" />
>
> <link rel="stylesheet" media="screen and (min-device-width:481 px)"
> href="not-small device.css">
Under Windows XP this works on Firefox and Safari, but unfortunately
fails under IE, which makes it non-viable for now.
Shannon Appelcline
> fails under IE, which makes it non-viable for now.
Just in case I'm missing anything obvious, this is what succeeded in
Safari and Firefox, but failed in IE:
<LINK rel="stylesheet" media="only screen and
(max-device-width:480px)"
HREF="http://www.rpg.net/include/styles-small.css" TYPE="text/css">
<LINK rel="stylesheet" media="screen and (min-device-width:481px)"
HREF="http://www.rpg.net/include/styles-main.css" TYPE="text/css">
Christopher Allen
> <LINK rel="stylesheet" media="only screen and
> (max-device-width:480px)"
> HREF="http://www.rpg.net/include/styles-small.css" TYPE="text/css">
> <LINK rel="stylesheet" media="screen and (min-device-width:481px)"
> HREF="http://www.rpg.net/include/styles-main.css" TYPE="text/css">
Wow, this was what Apple recommended at WWDC, and I went to the repeat
session to make sure my notes were correct.
-- Christopher Allen
Shannon Appelcline
> Wow, this was what Apple recommended at WWDC, and I went to the repeat
> session to make sure my notes were correct.
Well, whenever I have a single browser that doesn't work on something
that's supposedly in spec, it's inevitably IE.
I've gone with the equally simple but less elegant agent check:
if (ereg("iPhone",$_SERVER['HTTP_USER_AGENT'])) {
$iphone = 1;
} else {
$iphone = 0;
}
...
<? if ($iphone) { ?>
<LINK rel="stylesheet"
HREF="http://www.rpg.net/include/styles-small.css" TYPE="text/css">
<? } else { ?>
<LINK rel="stylesheet"
HREF="http://www.rpg.net/include/styles-main.css" TYPE="text/css">
<? } ?>
Shannon Appelcline
> Safari and Firefox, but failed in IE:
>
> <LINK rel="stylesheet" media="only screen and
> (max-device-width:480px)"
> HREF="http://www.rpg.net/include/styles-small.css" TYPE="text/css">
> <LINK rel="stylesheet" media="screen and (min-device-width:481px)"
> HREF="http://www.rpg.net/include/styles-main.css" TYPE="text/css">
I did some more testing of this, and IE seems to fail when anything
but just "screen" is in that media line.
Christopher Allen
> I did some more testing of this, and IE seems to fail when anything
> but just "screen" is in that media line.
Try putting only the beginning of both of these.
-- Christopher Allen
Shannon Appelcline
subsets for media, and none of them worked.
Shannon
--
On 7/3/07, Christopher Allen <Christ...@iphonewebdev.com> wrote:
>
Christopher Allen
> I'm not entirely sure what you mean, but I did most of the sensible
> subsets for media, and none of them worked.
They said something in the notes that the 'only' keyword was for
compatibility with CSS 2.
-- Christopher Allen
Christopher Allen
http://developer.apple.com/iphone/designingcontent.html they are
saying:
[quote]
To specify a style sheet that is just for iPhone without affecting
other devices, you use the only keyword in combination with the screen
keyword, as follows:
<link media="only screen and (max-device-width: 480px)"
href="iPhone.css" type="text/css" rel="stylesheet" />
Older browsers ignore the only keyword and won't read your iPhone
style sheet. To specify a style sheet for devices other than iPhone,
use an expression similar to the following:
<link media="screen" href="fancy.css" type="text/css" rel="stylesheet" />
[/quote]
Does that work on IE?
-- Christopher Allen
Glen Murphy
tags IE can and can't see.
On Jul 3, 11:00 am, Shannon Appelcline <Shannon.Appelcl...@gmail.com>
wrote:
Christopher Allen
> > So instead of using the handheld profile as you propose in your blog,
> > Apple recommends to use the following instead. Also, it includes a
> > trick so that CSS2 mediaqueries will still work right:
> >
> > <link rel="stylesheet" media="only screen and
> > (max-device-width:480px)" href="small-devices.css" type="text/css" />
> >
> > <link rel="stylesheet" media="screen and (min-device-width:481 px)"
> > href="not-small device.css">
>
> Under Windows XP this works on Firefox and Safari, but unfortunately
> fails under IE, which makes it non-viable for now.
This was suggested as a solution at
http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/
[quote]
To target the iPhone with CSS, use:
<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)"
href="iPhone.css" type="text/css" rel="stylesheet" />
<!--<![endif]-->
The logic of this is that only browsers that understand screen
understand only, and of these, only the iphone has a max-device-width
of 480px. The reason for the anti-IE comments is that some versions of
IE render CSS regadless of media type declarations.
[/quote]
-- Christopher Allen
Dean Hamack
481px and send them to my mini-site. It works on WM, but it doesn't work on
iphoney. I assume this is because my monitor's screen size is 1920 pixels
wide and it is reading that instead of the iphoney's window size.
Can someone check this link on an iphone and see if it redirects them?
http://www.bushidodesigns.net/iphone/demo/detect.htm
I'm also curious to know if adding div { -webkit-text-size-adjust:200%; }
made my text twice as large and therefore more legible. Once again, it don't
work on the aptly named iphoney.
Muchas gracias.
Dean Hamack
Macromedia Certified Flash MX Designer/
Lead Web Developer
Bushido Designs
Tel:(206)523-6705
www.bushidodesigns.net
Ⓙⓐⓚⓔ
if (navigator.userAgent.indexOf('iPhone') != -1) {
document.location = "index.htm";
}
if (screen.width
<= 481) {
document.location = "index.htm";
}Ⓙⓐⓚⓔ - יעקב ʝǡǩȩ ᎫᎪᏦᎬ
Dean Hamack
> one of the ifs sent me there! I think it was the iphone in the first!
>
> if (navigator.userAgent.indexOf('iPhone') != -1) {
> document.location = "index.htm";
> }
>
> if (screen.width
> <= 481) {
> document.location = "index.htm";
> }
If you were on an iphone, that's a good thing :)
If you were on something else, that's bad :(
Which was it?
Jake
Tapped on my iPhone
On Jul 9, 2007, at 3:32 PM, Dean Hamack <bushido...@gmail.com>
wrote:
Ⓙⓐⓚⓔ
when you open up a section, close the others! Too bad I'm not in Seattle, It looks like fun!
Dean Hamack
>
> iPhone but my first reply was typed in firefox!
OK, good.
And actually, the second statement should probably be:
else if (screen.width <= 481) {
document.location = "index.htm";
}
I've tested it in Safari, FF, iphoney, and WM5, works properly on all.
Ⓙⓐⓚⓔ
Kalle Alm
> Can someone check this link on an iphone and see if it redirects them?
>
> http://www.bushidodesigns.net/iphone/demo/detect.htm
I was redirected to index.htm. The page said it was optimized for
iPhones and Windows Mobile Devices.
> I'm also curious to know if adding div { -webkit-text-size-adjust:200%; }
> made my text twice as large and therefore more legible. Once again, it don't
> work on the aptly named iphoney.
The text is big and stuff. Not sure if it's bigGER since I didn't see
the page without the fix.
-Kalle.