CODEWITHSUNDEEP
iphonemobile
Irawana
Irawana

Reputation: 269

Enable zoom in mobile website

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?

Upvotes: 11

Views: 8426

Answers (3)

Suhail Patel
Suhail Patel

Reputation: 13694

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

Upvotes: 11

Sabra
Sabra

Reputation: 78

When I just came across this post because I was experiencing the same issue, I realized that you can also simply remove the tag to make it scroll/zoom.

Upvotes: 1

Tayba
Tayba

Reputation: 148

set also user-scalable to 1.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=10.0; user-scalable=1;" />

Upvotes: 0

Related Questions