The Cache: Technology Expert's Forum
 
*
Welcome, Guest. Please login or register. September 21, 2019, 12:14:30 PM

Login with username, password and session length


Pages: [1]
  Print  
Author Topic: CSS styling, iPhone versus regular site  (Read 2124 times)
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« on: January 17, 2008, 09:46:47 AM »

Just caught this post at a thread I'm in on the SMF board which is great stuff regardless of your need. The question was, how does the iPhone know how to see things differently than a regular browser?

Well I'd always assumed (and programmed in my testing) to the UA because my sites are all dynamic - so the server side modified the output to the phone and presto... but in this case, a static site can do the same using a special link tag in the header:

Quote from: IchBin
That looks great! I've been thinking about these types of theme for a bit now. How does the theme recognize that its an iphone ?

Using a stylesheet link in the head of your document with instructions only the iphone picks up.

http://developer.apple.com/iphone/devcenter/designingcontent.html

Quote from: Apple
Web designers often assume a particular window size when designing their sites. If thatís the path you want to take, you may want to provide one for a Safari on iPhone specific size. You should also provide conditional CSS for iPhone (or other devices, for that matter).

You can tailor the style of your webpages by providing a style sheet that adapts to iPhone. The CSS 3 media query allows you to do just that. There are several types of queries including print, handheld, and screen. iPhone ignores the print and handheld media queries because these types do not supply high-end content. So the screen query is what you need to use.

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:

Code:
<link media="only screen and (max-device-width: 480px)"
href="small-device.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:
Code:
<link media="screen and (min-device-width: 481px)"
href="not-small-device.css" type="text/css" rel="stylesheet" >

Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
Pages: [1]
  Print  
 
Jump to:  

Perkiset's Place Home   Best of The Cache   phpMyIDE: MySQL Stored Procedures, Functions & Triggers
Politics @ Perkiset's   Pinkhat's Perspective   
cache
mart
coder
programmers
ajax
php
javascript
Powered by MySQL Powered by PHP Powered by SMF 1.1.2 | SMF © 2006-2007, Simple Machines LLC
Seo4Smf v0.2 © Webmaster's Talks


Valid XHTML 1.0! Valid CSS!