This shows you the differences between two versions of the page.
Next revision | Previous revision | ||
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... |