http://vani.vox.com/library/posts/tags/iphone/page/1/ the fresh-from-the-corner-market VOX edition. en Vox Thu, 12 Jul 2007 16:25:31 -0700 Copyright 2007 http://blogs.law.harvard.edu/tech/rss iphone http://vani.vox.com/library/post/quick-n-dirty-styles-for-iphone.html?_c=feed-rss-full nobody@vox.com(Vani) http://vani.vox.com/library/post/quick-n-dirty-styles-for-iphone.html?_c=feed-rss-full http://vani.vox.com/library/post/quick-n-dirty-styles-for-iphone.html?_c=feed-rss-full Thu, 12 Jul 2007 16:25:31 -0700 <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-rss-full#comments">Read and post comments</a> | <a href="http://www.vox.com/share/6a00c22520eeac604a00d4144b50d26a47?_c=feed-rss-full">Send to a friend</a> </p> design css web development iphone