No iOS Pinch to Zoom on my RW Theme Based Sites

I cannot use iOS pinch to zoom on any of my RW created theme based sites. Why is that? Any ideas? Is there a setting in RW?

Hello @bruce from my knowledge, its nothing to do with RW created themes but its to do with the responsive nature of any website. I mean to say any responsive website would not have this (pinch to zoom) functionally in any mobile device browsers unless you create a mobile app and render the data into the mobile app to zoom it. I may be wrong but i did some analysis in past on this issue/questions.

Your best alternative is to have a Magnifont stack from @joeworkman if you like to give the functionality to increase the size of the font in your website

Hope this helps,

Cheers,
Rajat

@bruce I don’t have a problem using pinch to zoom on my responsive sites. Using foundation theme.
You’d have a url?

Just to clarify, this is not a deal breaker for me. I feel my sites look fine on mobile devices. Just curious why the pinch does not work.

http://vectorworksexchange.com
http://www.lash-it.com
http://kcfi.biz/test/

I checked these sites of mine and they do “pinch”. Must be theme related. Both of these use Volcano.
http://sfri.biz
http://thriftycabinets.com

@bruce

On the two working “pinch to zoom” sites your "viewport meta tag configuration is different than on your non-working “pinch to zoom” sites.

Perhaps that has something to do with it.

Brad

It is because the theme is setting user-scalable to false in the viewport meta tag in the head section of your code. I’m sure the theme developer had a good reason for this. Indeed since the recent iOS update that supports split screen apps on certain devices, you may see it even more as a fix for unwanted zooming of pages.

`meta “viewport” content=“width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0”

3 Likes

@Turtle You can obviously type faster than me :slight_smile:

@tav :slight_smile: maybe, but you’re more thorough :wink: Good job!

Brad

1 Like

I’m having the same problem / issue as Bruce.
Viewport was mentioned by Tav, but I can’t for the life of me find any such setting.

Here’s the test site I want to achieve this on:

Thetford Christians Together

Still a work in progress exercise, and using Foundation.

Any ideas would be gratefully appreciated.

@mike_hamilton

It’s a meta tag you have to manually add to the head section of the site to be global.

<meta "viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=1">

Some themes and/or RapidWeaver add the base meta data tag of:

<meta "viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

Which means it is not scalable.

initial-scale=1.0 - scale is actual size to fit screen based on device-width and device-height
user-scalable=0 - not scalable, 1 - is scalable
minimum-scale=1.0 means that it will not shrink any farther than currently available
maximum-scale=1.0 means it will not zoom any farther than currently available

You can reset max and min to .5 and 2.0 accordingly or leave them off for no control.

Hope that helps.
Brad

1 Like

Please let me reopen this thread, because I have the same problem and can’t find a way to solve it by following the nice solutions suggested in this page.

I’ve added the following line to the Code > Head box:

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

By examining the code, I see that this line has been added by RW to my pages, but at the same time I find this line, that was automatically inserted:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

How can I remove it? I tried to manually edit the theme files, but I can’t find in which of the files this line can be. Any hint?

Paolo

Should be in the index.html of the theme template.