{"id":1587,"date":"2011-02-23T13:00:20","date_gmt":"2011-02-23T19:00:20","guid":{"rendered":"http:\/\/bililite.nfshost.com\/blog\/?p=1587"},"modified":"2011-10-05T19:09:12","modified_gmt":"2011-10-06T01:09:12","slug":"custom-css-for-iphone","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2011\/02\/23\/custom-css-for-iphone\/","title":{"rendered":"Custom CSS for iPhone"},"content":{"rendered":"<p>I decided to make the <a href=\"http:\/\/youngisrael-stl.org\">Young Israel<\/a> site iPhone-friendly, and there are lots of good sites for tips on creating custom CSS for the small screen. The best I found was on <a href=\"http:\/\/csswizardry.com\/2010\/01\/iphone-css-tips-for-building-iphone-websites\">CSS wizardry<\/a>. It doesn't focus on the <em>how<\/em> so much (using media queries or checking the User-Agent string (evil!)) as the <em>what<\/em>&mdash;making sure the elements are linear vertically, not using floats, shortening headers, etc. The major problem is that his <a href=\"http:\/\/csswizardry.com\/wp-content\/themes\/default\/style.css\">CSS sample<\/a> has the \"wrong\" syntax for the media query, so it won't work.<\/p>\r\n<p>The big gotcha from the <a href=\"http:\/\/www.w3.org\/TR\/css3-mediaqueries\/#syntax\">official CSS3 documentation<\/a>: <code class=\"language-css\">@media (max-device-width: 480px)<\/code> <em>doesn't work<\/em> (in either Safari or Firefox), even though the documentation says it's legal. You have to have a media type in there: <code class=\"language-css\">@media screen and (max-device-width: 480px)<\/code>. Took me forever to find that bug.<\/p>\r\n<p>I would also use <code>max-device-width<\/code> rather than <code>max-width<\/code>; the user on a big screen may shrink the window and it would be confusing for the layout of the site to suddenly change. I would also not use the <code>only screen<\/code> hack that Apple suggests; there doesn't seem to be any reason to use CSS hacks (shades of the 1990's!) to target only iPhones.<\/p>\r\n<p>The other gotcha is with my <a href=\"\/blog\/2009\/01\/16\/jquery-css-parser\/\">CSS parser<\/a>: the javascript is run in the order that it is seen, so if you want to remove a widget for the small screen you have to explicitly destroy it:<\/p>\r\n<pre><code>#q {\r\n  -jquery-googleSearch: \/* default *\/;\r\n}\r\n@media screen and (max-device-width: 480px){\r\n  #q {\r\n    -jquery-googleSearch: destroy;\r\n  }\r\n}<\/code><\/pre>\r\n<p>Hope this helps somebody avoid a miserable morning.<\/p>","protected":false},"excerpt":{"rendered":"I decided to make the Young Israel site iPhone-friendly, and there are lots of good sites for tips on creating custom CSS for the small screen. The best I found was on CSS wizardry. It doesn't focus on the how so much (using media queries or checking the User-Agent string (evil!)) as the what&mdash;making sure [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/1587"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=1587"}],"version-history":[{"count":7,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/1587\/revisions"}],"predecessor-version":[{"id":1594,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/1587\/revisions\/1594"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=1587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=1587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=1587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}