Account Options

  1. Sign in
The old Google Groups will be going away soon, but your browser is incompatible with the new version.
Google Groups Home
« Groups Home
iPhoneWebDev
Home
About this group
Apply for group membership
Message from discussion Using CSS3 Media Queries to target the iPhone
The group you are posting to is a Usenet group. Messages posted to this group will make your email address visible to anyone on the Internet.
Your reply message has not been sent.
Your post was successful
 
From:
To:
Cc:
Followup To:
Add Cc | Add Followup-to | Edit Subject
Subject:
Validation:
For verification purposes please type the characters you see in the picture below or the numbers you hear by clicking the accessibility icon. Listen and type the numbers you hear
 
Christopher Allen  
View profile  
 More options Jun 30 2007, 2:48 am
From: "Christopher Allen" <Christoph...@iPhoneWebDev.com>
Date: Fri, 29 Jun 2007 23:48:40 -0700
Local: Sat, Jun 30 2007 2:48 am
Subject: Re: Using CSS3 Media Queries to target the iPhone
Print | View thread | Show original | Report this message | Find messages by this author
On 6/26/07, Pelle <pel...@gmail.com> wrote:

> I discovered this post about using CSS3 Media Queries:
> http://www.css3.info/preview/media-queries.htmlhttp://www.css3.info/p...

> 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:

> http://stakeventures.com/articles/2007/06/26/useful-css3-support-targ...

> Has anyone else used these definitely new selectors before?

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


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Create a group - Google Groups - Google Home - Terms of Service - Privacy Policy
©2012 Google