A while back I used iPhoney to create an iPhone version of Humaniz Interactive’s website. I stripped out all the flash components and tried to optimize the graphics and text as best I could. Knowing that it may or may not work right on a real iPhone we didn’t release it. Right around that time my little brother got an iPod Touch so I was able to look it over, to my horror and amusement it zoomed the site out to look like a little speck, about the same as it does on my MacBook Pro’s screen.We were too busy installing Nintendo games to do any web development so it sat around until I was able to pick up an iPhone. I figured the fix was really simple and it was, you can set a meta tag to disable zooming. The top of my file ended up looking like this:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>My Title</title>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<meta name=”viewport” content=”width=device-width, user-scalable=no” />
Notice the viewport meta tag. This puts the scale at 100% and doesn’t allow the user to resize the site. I tried removing “user-scalable” and in the case of humaniz’s site the zoom only made a couple of pixel’s difference. It seemed awkward and weird so I turned it off. I scaled everything down to be iPhone size so maybe if you have some content that isn’t scaled down it will allow the user to zoom more than just a couple of pixels.
Tags: HTML, iPhone, Mobile Safari