Submit Hint Search The Forums LinksStatsPollsHeadlinesRSS
14,000 hints and counting!

Create iPhone-optimized themes in WordPress iOS devices
If you have your own install of WordPress, it's easy to make an iPhone-optimized theme for your blog -- without changing anything for non-iPhone users. This info might be useful for anyone building web sites with other tools as well. Here are the quickie instructions:
  1. Make a unique stylesheet, styles-iphone.css, ditching the stuff you don't need, and setting div widths to 320.
  2. Add this to the header.php file in your theme:

    <?php
      $iphone_stylesheet = str_replace(".css", "_iphone.css", get_bloginfo('stylesheet_url'));
    ?>
    <link media="only screen and (max-device-width: 480px)" href="<?php echo $iphone_stylesheet; ?>" type="text/css" rel="stylesheet" />
    <?php
      if (strstr($_SERVER['HTTP_USER_AGENT'], "iPhone"))
      {
        echo ‘<meta name="viewport" content="width = 320″ />';
      }
    ?>
This tells the iPhone to use the new stylesheet, and the viewport tells it to zoom right in on your content. There's a bit more info in my blog post, if you need more help.
    •    
  • Currently 2.14 / 5
  You rated: 4 / 5 (7 votes cast)
 
[18,255 views]  

Create iPhone-optimized themes in WordPress | 1 comments | Create New Account
Click here to return to the 'Create iPhone-optimized themes in WordPress' hint
The following comments are owned by whoever posted them. This site is not responsible for what they say.
Create iPhone-optimized themes in WordPress
Authored by: kkL on Jul 16, '07 11:38:35AM
Please, don't break the web with iPhone-only mobile pages! It's as lame as "optimized for IE only" pages on desktop.

There's more than just iPhone out there. iPhone's cousin on Nokia S60, Opera Mobile, Mozilla Minimo and a few other browsers can handle advanced CSS as well as iPhone does.

Instead of Apple-supplied hacks, use generic CSS3 Media Queries.
See:
http://my.opera.com/dstorey/blog/iphone-and-developing-for-mobile


[ Reply to This | # ]