Alex Rivera | Logout

Enable zoom in mobile website

Asked 2011-12-29T10:19:32.820
11

I'm developing a mobile web site. But the zoom effect is not working on my pages. I've used the following tag in the pages.

<meta name="viewport" 
      content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

I want to know:

  1. Is it possible to get the zoom effect with this tag and how to use it in correct way?

  2. Are there any more tags I can use for this purpose?

  3. Our client base is mostly on iPhone. Are there special things/techniques I should consider/use when developing a mobile web site for iPhone users?

iphone mobile
Edit
Report

2 Answers

11

This is because you've set the maximum-scale to the minimum amount (1.0) which means it won't be zoomable beyond what is rendered initially. You need to set the maximum-scale to something else between 1.0 and 10.0 in that meta tag. The default by Apple is to have the maximum-scale as 5.0 as per Apple's Documentation.

Apple's Documentation on Meta Tags has a table on Viewport properties which list all the viewport meta tags which can be used

answered 2011-12-29T18:16:35.407
0

set also user-scalable to 1.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=10.0; user-scalable=1;" />
answered 2012-12-04T19:33:34.140

Your Answer