Learn to Code by Making Art
Learn programming while your create computer art by copying code from my free guide.
https://splashofcode.com

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...
Learn to Code by Making Art
Learn programming while your create computer art by copying code from my free guide.
https://splashofcode.com
comments powered by Disqus
making_this_website_fit_your_iphone.txt · Last modified: 2009/11/11 15:51 by Joel Dare