<?xml version="1.0" encoding="utf-8"?>
<feed
    xmlns="http://www.w3.org/2005/Atom"
    xmlns:at="http://www.sixapart.com/ns/at"
    xmlns:icbm="http://postneo.com/icbm"
    xmlns:rvw="http://purl.org/NET/RVW/0.2/"
    xml:lang="en">
    <title>vaniraja.com</title>
    <link rel="self" type="application/atom+xml" title="vaniraja.com (Atom)" href="http://vani.vox.com/library/posts/tags/iphone/page/1/atom.xml" />
    <link rel="alternate" type="text/html" title="vaniraja.com" href="http://vani.vox.com/library/posts/tags/iphone/page/1/"/> 
    <link rel="service.post" type="application/atom+xml" title="vaniraja.com" href="http://www.vox.com/services/atom/svc=post/collection_id=6a00c22520eeac604a00c22521e3d48e1d" /> 
    <link rel="service.subscribe" type="application/atom+xml" title="vaniraja.com" href="http://vani.vox.com/library/posts/tags/iphone/atom.xml" />   
    <link rel="last" type="application/atom+xml" title="vaniraja.com" href="http://vani.vox.com/library/posts/tags/iphone/page/1/atom.xml" />  
    <category term="iphone" scheme="http://vani.vox.com/tags/iphone/?_c=feed-atom-full" label="iphone" /> 
    <generator uri="http://www.vox.com/">Vox</generator>
    <updated>2009-07-23T12:04:17Z</updated> 
    <author>
        <name>Vani</name>
        <uri>http://vani.vox.com/?_c=feed-atom-full</uri>
    </author> 
    <id>tag:vox.com,2006:6p00c22520eeac604a/tags/iphone/</id> 
    <subtitle>the fresh-from-the-corner-market VOX edition.</subtitle>  
    
    <entry>
        <title>quick n&#39; dirty styles for iPhone</title>   
        <link rel="alternate" type="text/html" title="quick n&#39; dirty styles for iPhone" href="http://vani.vox.com/library/post/quick-n-dirty-styles-for-iphone.html?_c=feed-atom-full" />  
        <link rel="service.post" type="application/atom+xml" title="quick n&#39; dirty styles for iPhone" href="http://vani.vox.com/library/post/quick-n-dirty-styles-for-iphone.html?_c=feed-atom-full#comments" /> 
        <link rel="service.edit" type="application/atom+xml" title="quick n&#39; dirty styles for iPhone" href="http://www.vox.com/atom/svc=post/asset_id=6a00c22520eeac604a00d4144b50d26a47" />              <id>tag:vox.com,2007-07-12:asset-6a00c22520eeac604a00d4144b50d26a47</id>
        <published>2007-07-12T23:25:31Z</published>
        <updated>2009-07-23T12:04:17Z</updated>
    
        <author>
            <name>Vani</name>
            <uri>http://vani.vox.com/?_c=feed-atom-full</uri>
        </author>
    
        
        <content type="html" xml:base="http://vani.vox.com/?_c=feed-atom-full">
            <![CDATA[
                <div xmlns="http://www.w3.org/1999/xhtml" xmlns:at="http://www.sixapart.com/ns/at">
        
    
    
    

    
    
    

    
    
    

    
    
    
<div at:enclosure="asset" at:xid="6a00c22520eeac604a00d4144db8a23c7f" at:format="medium" at:align="left"
    class="enclosure enclosure-left enclosure-medium photo-enclosure" 
     style="text-align: center; float: left;">
<div class="enclosure-inner"
    
        style="padding: 9px; border: 1px solid; width: px; margin: 0 20px 20px 0;"
    >
    <div class="enclosure-list">
        <div class="enclosure-item photo-asset last">
    
            <div class="enclosure-image">
        
                <a href="http://vani.vox.com/library/photo/6a00c22520eeac604a00d4144db8a23c7f.html"><img src="http://a2.vox.com/6a00c22520eeac604a00d4144db8a23c7f-200pi" alt="" title="" /></a>
        
            </div>
            <div class="enclosure-meta">
                <div class="enclosure-asset-name"><a href="http://vani.vox.com/library/photo/6a00c22520eeac604a00d4144db8a23c7f.html" title=""></a></div>
            </div>
    
        </div>
    </div>
</div>
</div><!-- end enclosure -->
<p>


I recently redesigned <a href="http://www.webchic.net">webchic.net</a> and wanted to tweak the design to look good on the iPhone. While my first thought was to use a JS style switcher triggered by the iPhone&#39;s unique WebKit referrer, I decided on a much simpler solution for now. </p><pre><pre>&lt;!--[if !IE]&gt;--&gt;<br />&lt;link media=&quot;only screen and (max-device-width: 480px)&quot;<br />    href=&quot;iPhone.css&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot; /&gt;<br />&lt;!--&lt;![endif]--&gt;</pre></pre><p></p><p>Ultimately, only browsers that recognize <em>screen</em> will understand <em>only</em>, and only the iPhone fits the category of <em>max-device-width: 480px</em>.</p><p>On a related side note, I&#39;ve notice a lot of developers reciting &quot;browser width 320px&quot; in regards to iPhone development. This is a little misleading, since the tilted, horizontal iPhone screen is much more popular when surfing websites and is 480px wide.<br />        
    
    
    

    
    
    
<div at:enclosure="asset" at:xid="6a00c22520eeac604a00d4144b50bd6a47" at:format="large" at:align="center"
    class="enclosure enclosure-center enclosure-large photo-enclosure" 
     style="text-align: center;">
<div class="enclosure-inner"
    
        style="padding: 9px; border: 1px solid; width: px; margin: 10px auto;"
    >
    <div class="enclosure-list">
        <div class="enclosure-item photo-asset last">
    
            <div class="enclosure-image">
        
                <a href="http://vani.vox.com/library/photo/6a00c22520eeac604a00d4144b50bd6a47.html"><img src="http://a5.vox.com/6a00c22520eeac604a00d4144b50bd6a47-320pi" alt=" webchic.net" title=" webchic.net" /></a>
        
            </div>
            <div class="enclosure-meta">
                <div class="enclosure-asset-name"><a href="http://vani.vox.com/library/photo/6a00c22520eeac604a00d4144b50bd6a47.html" title=" webchic.net"> webchic.net</a></div>
            </div>
    
        </div>
    </div>
</div>
</div><!-- end enclosure -->

<br /><pre style=""><br /> <div><br /></div></pre><div><br /></div></p>   <p style="clear:both;">

    <a href="http://vani.vox.com/library/post/quick-n-dirty-styles-for-iphone.html?_c=feed-atom-full#comments">Read and post comments</a>

 | 

    
    <a href="http://www.vox.com/share/6a00c22520eeac604a00d4144b50d26a47?_c=feed-atom-full">Send to a friend</a>

</p>

                </div>
            ]]>
        </content> 
    <category term="design" scheme="http://vani.vox.com/tags/design/" label="design" /> 
    <category term="css" scheme="http://vani.vox.com/tags/css/" label="css" /> 
    <category term="web development" scheme="http://vani.vox.com/tags/web+development/" label="web development" /> 
    <category term="iphone" scheme="http://vani.vox.com/tags/iphone/" label="iphone" /> 
    </entry> 
</feed>


