6 replies [Last post]
untchablecs
Offline
Regular
CA
Last seen: 6 years 38 weeks ago
CA
Joined: 2007-06-12
Posts: 13
Points: 0

So I've done quite a bit of research already and found the following code to target the Safari browser on the iPhone...

The problem is when I go to the W3C site to validate my CSS i get this error..."unrecognized media only screen and (max-device-width: 480px)".
Is there any way to get this code to validate?

jinoturistica
Offline
Enthusiast
Jinotega, Nicaragua
Last seen: 6 years 35 weeks ago
Jinotega, Nicaragua
Timezone: GMT-6
Joined: 2007-11-16
Posts: 152
Points: 0

looks valid to me

on visual inspection and comparing to the W3 BNF for media queries, it looks valid to me. Wouldn't be the first bug in a W3 validator :-0

Just doin' my best at www.jinotega.com
Tony Robins

Katie
Katie's picture
Offline
Enthusiast
Seattle, WA
Last seen: 3 years 23 weeks ago
Seattle, WA
Timezone: GMT-7
Joined: 2006-08-06
Posts: 357
Points: 2

I wanted to add a little bit

I wanted to add a little bit here, just so that other folks looking for info don't get confused.

Correct me if I'm wrong but aren't there two parts to targeting CSS to the iPhone? You've got the second part, but the first part is:

Re http://www.jeremyflint.com/archives/2007/07/11/designing-for-the-iphone.

Also, out of curiosity, what changes will you be making to your site layout with the iPhone only style sheet?

Blog: Pew Pew Laser Blog
Online File Storage: DropBox
Daily Deals on Local Activities: Groupon

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

jinoturistica wrote:on

jinoturistica wrote:
on visual inspection and comparing to the W3 BNF for media queries, it looks valid to me.

They might be valid CSS3, but the validator doesn't validate CSS3 by default; it defaults to CSS2.1. If you want to validate your stylesheet as CSS3 you have to choose it from under 'more options'.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

untchablecs
Offline
Regular
CA
Last seen: 6 years 38 weeks ago
CA
Joined: 2007-06-12
Posts: 13
Points: 0

To Tyssen: Thanks for the

To Tyssen: Thanks for the note on changing the options in the validator to CSS3.

The only things that my iPhone style sheet does is bump the navigation font up 135% and the body text up 160%. It just makes it a bit more readable on the small screen. I also used this style sheet to set my contact form text to align left instead of "justify". With the bigger font size (160%) it made my contact form look wonky due to the justified text so i just have it "left" aligned for the iPhone.

jinoturistica
Offline
Enthusiast
Jinotega, Nicaragua
Last seen: 6 years 35 weeks ago
Jinotega, Nicaragua
Timezone: GMT-6
Joined: 2007-11-16
Posts: 152
Points: 0

font size cell phones

The average iPhone user has probably browsed hundreds of web sites and has already set their default font size to their own preferences and abilities. I would not adjust font size for a device (or anything else, actually).

However, my nice 720px wide hi def header pix is a waste of time energy and money to a 480px device. Similarly, my largely decorative right column just occupies valuable real estate on an iPhone so that space gets donated to content.

Not that I was the person being asked the question of!

The link to the 'first part' of iPhone detection takes me to a 404. Shame, 'cause I am really interested.

Just doin' my best at www.jinotega.com
Tony Robins

untchablecs
Offline
Regular
CA
Last seen: 6 years 38 weeks ago
CA
Joined: 2007-06-12
Posts: 13
Points: 0

Tried to Validate CSS3

Tyssen wrote:
jinoturistica wrote:
on visual inspection and comparing to the W3 BNF for media queries, it looks valid to me.

They might be valid CSS3, but the validator doesn't validate CSS3 by default; it defaults to CSS2.1. If you want to validate your stylesheet as CSS3 you have to choose it from under 'more options'.

I went into the W3C validator "more options" and changed it to CSS3 but it still doesn't validate. It's not a huge deal as that's the only error i have on my site (either xhtml or css) but it still bugs me a bit! I may try the other examples that were given on this site...

http://www.jeremyflint.com/archives/2007/07/11/designing-for-the-iphone

...and see if that works. Thanks for everyone's feedback.