http://cssdiscussion.com CSS Discussion en http://backend.userland.com/rss http://cssdiscussion.com/viewtopic.php?pid=89#89 89@http://cssdiscussion.com Topic: Optimize for the iPhone from Apple.com Message: I'm not going all out for the iPhone until they fix their problems... so maybe until 2nd Generation... the 1G phones are horrible. So is the service and AT&T is an awful carrier.Good tutorial though, very informative. I have noticed people going to my site using iPhones lately. Wed, 15 Aug 2007 04:46:56 +0100 http://cssdiscussion.com/viewtopic.php?pid=46#46 46@http://cssdiscussion.com Topic: Optimize for the iPhone from Apple.com Message: Nope, didn't get one. Just thought this content on the Apple site would be very useful to some! Sat, 14 Jul 2007 05:52:08 +0100 http://cssdiscussion.com/viewtopic.php?pid=45#45 45@http://cssdiscussion.com Topic: Optimize for the iPhone from Apple.com Message: TheBigGuy,Did you happen to pickup an iPhone?  This is a great tutorial, thanks! Fri, 13 Jul 2007 12:24:57 +0100 http://cssdiscussion.com/viewtopic.php?pid=41#41 41@http://cssdiscussion.com Topic: Optimize for the iPhone from Apple.com Message: Here are a few ways to optimize content for your iPhone as seen on Apple:Follow Established Web Design PracticesGood implementation and design practices that apply to Safari and other browsers on the computer desktop also apply to Safari on iPhone. Poorly designed pages that render poorly on the computer desktop will render poorly on iPhone. Well-designed pages that look terrific when viewed using Safari on the computer desktop will likely look great on iPhone. If you are not already following these guidelines, you’ll want to embrace them now:    * Separate HTML, CSS, and JavaScript.    * Use well-structured and valid HTML. Make sure the HTML is valid by running a validator on it. See http://validator.w3.org/ or use the validation functionality built into your web development tools.    * Size image elements appropriately; don’t rely on browser scaling. For example, don’t put a 100 x 100 image in a 10 x 10 <img> element.    * Tile small background images; don’t use large background images. If necessary, split background images and tile the pieces.    * Avoid using framesets. On the computer desktop, each can be independently scrolled. On iPhone, Safari expands each frame to fit its content, then scales it down to fit its region. Use CSS instead of framesets.    * Use columns and blocks like many of the online newspapers do. Text blocks that span the full width of the page tend to be difficult to read. Columns not only break up the page, making it easy to read, but also work well when users double-tap the screen.    * Include only those resources that are necessary. Keep in mind that iPhone uses both EDGE (lower bandwidth) and Wi-Fi (higher bandwidth). Including unused CSS and JavaScript content affects your site’s performance. You can quickly check the size of your pages by using Safari to save your page as a web archive. The total size of the web archive is the size of the page and its associated resources.    Know Where Your Pages Are RenderingThe Safari user agent string for iPhone is similar to the user agent string for Safari on the other platforms except for two differences: it contains an iPhone platform name and the mobile version number.Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko)    Version/3.0 Mobile/1A543a Safari/419.3The platform string is: (iPhone; U; CPU like Mac OS X; en)The version string is: Version/3.0 Mobile/1A543a Safari/419.3The marketing version (Version/3.0) is included in Safari on other platforms. Therefore, you can use it to track usage statistics across all platforms.Specify an iPhone Style SheetWeb 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: <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 and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet" /> Lay Out Content for the iPhone ViewportiPhone viewport dimensionsThe viewport is the rectangle area that determines how content is laid out and where text wraps on a webpage. On the desktop, the viewport is determined by the size of the window. The user resizes the viewport by resizing the window and scrolls to see more of the webpage. Safari on iPhone doesn't have windows — there are no scroll bars or resize knobs. Therefore, the "window" is a fixed size determined by the iPhone screen size. The user pans to see more of the webpage, and can also zoom in and out using double tap or the pinch gesture.To make this work on iPhone, the viewport has a scale and width property. When Safari first loads a webpage, it sets the initial scale to fit the webpage completely width-wise on the iPhone screen. Safari on iPhone also sets the viewport width to 980 pixels, the width of most webpages. If these default values don't work for your content, you can change them and other viewport properties using the viewport meta tag in your content.For example, if your webpage is less than 980 pixels wide, causing it to scale too small on iPhone, then set the viewport width to the width of your webpage. Note that the width of your content can always be greater than the viewport width — requiring the user to pan to see more content — but it can never be smaller. The initial scale property only controls the scale when the webpage is first displayed. Thereafter, the user controls the scale using gestures. So if you don't want the user to scale your content, use the viewport meta tag to turn off user scaling of your content.The viewport meta tag properties are:    * width The default is 980. The range is [200, 10,000].    * height The default is calculated based on the width and aspect ratio. The range is [223, 10,000].    * initial-scale is the scale to render the page when it first loads. The default fits the page to the screen. The range is [minimum-scale, maximum-scale]. Keep in mind that the user can change the scale, either through the pinch gesture or by a double tap.    * user-scalable determines whether or not the user can scale the page. The default is yes.    * minimum-scale is the lower bound for scaling. The default is 0.25; the range is [>0, 10].    * maximum-scale is the upper bound for scaling. The default is 1.6; the range is [>0, 10].You do not need to set each property. If only a subset of the properties are set, then Safari on iPhone attempts to infer the other values. For example, if you set the scale to 1.0, Safari assumes the width is 320 pixels in portrait and 480 pixels in landscape orientation. Therefore, if you want the width to be 980 pixels and the initial scale to be 1.0, then set both of these properties.Here are some examples of using the viewport meta tag: <meta name="viewport" content="width = 320" /> <meta name="viewport" content="initial-scale=2.3, user-scalable=no" /> The recommended viewport width for web applications is 320 pixels. This renders the web application with a scale of 1.0 and doesn't change the layout when you switch to landscape orientation. Thu, 12 Jul 2007 20:42:50 +0100