Differences

This shows you the differences between two versions of the page.

Link to this comparison view

making_this_website_fit_your_iphone [2009/11/11 15:44]
Joel Dare created
making_this_website_fit_your_iphone [2009/11/11 15:51] (current)
Joel Dare
Line 1: Line 1:
 +====== Making this Website fit your iPhone ======
  
 +After I created my new site design I decided I wanted it to fit nicely on my iPhone. ​ When I browsed to the site, it worked okay, but I wanted more.  I identified the following issues I wanted to solve.
 +
 +  - The initial zoom was too small by default.
 +  - When I edit a page the zooming in and out is dizzying.
 +
 +The first two problems were both correctable with a single tag supported by the mobile Safari browser. ​ The meta //​viewport//​ tag.  My page was designed so that the usable area is exactly 700 pixels. ​ Around that are 20 pixels of padding, a 1 pixel border, and another 20 pixels of padding around that.  Add both sides together (or measure it) and you come up with 782 pixels for the ideal size.  So, I set the viewport width to 782 and turn off user scaling.
 +
 +  <meta name="​viewport"​ content="​width=782,​ user-scalable=no">​
 +
 +Perfect, that looks good.  You might argue that disabling user scaling is bad for usability, and you'd be right, but I couldn'​t stand the zooming when I was trying to edit things.
 +
 +After fixing the zoom, I found that the font size for editing was a bit too small. ​ Specifically,​ the "​textarea"​ box ended up with really small text. So, I grabbed Google and found that you can increase that size with the special iPhone css tag "​-webkit-text-size-adjust"​. ​ I added that to my page, but it didn't seem to change anything. ​ The next solution I found was to add another stylesheet for small displays.
 +
 +<​code>​
 +<link media="​only screen and (max-device-width:​ 480px)" ​
 +href="​css/​iphone.css"​ type="​text/​css"​ rel="​stylesheet"​ />
 +</​code>​
 +
 +So far, that hasn't worked either. ​ But, I've run out of time.  For now, I'll leave the tiny font...
 

comments powered by Disqus
making_this_website_fit_your_iphone.txt ยท Last modified: 2009/11/11 15:51 by Joel Dare