Differences

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

--- making_this_website_fit_your_iphone [2009/11/11 15:44]
Joel Dare created
+++ making_this_website_fit_your_iphone [2020/06/01 22:53] (current)
@@ 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...