Software Archive
Read-only legacy content
17061 Discussions

Can not pinch and zoom on image

Mercedes_B_
Beginner
610 Views

Greetings!

I have set the viewport to user-scalable= yes and have tried other variations but still can not pinch to zoom in / out of an image.

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

Also tried <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=0.5, maximum-scale=2">

Also tried <meta name="viewport" content="width=device-width, initial-scale=1">

for a list view div tags(no scale image size set) have tried 100% width but it still will no zoom out/in.

<div class="widget uib_w_22 d-margins" data-uib="media/img" data-ver="0">
                                        <figure class="figure-align">
                                            <img src="images/Strabburg.jpg">
                                            <figcaption data-position="bottom"></figcaption>
                                        </figure>
                                    </div>

I'm stumped, thought this would be simple.  This can be recreated using a List Template with App Designer v1621.

Thank you for your help.

0 Kudos
5 Replies
Mercedes_B_
Beginner
610 Views

Actually the user needs to be able to zoom out through-out this app not just the images.  This is serious that this feature is not working on this mobile app.   The user needs to be able to get a closer look at text or images if they need to.

What needs to be done other than what I have already indicated below.

Thank you.

0 Kudos
Anusha_M_Intel1
Employee
610 Views

Your meta tags should technically work. What is the device you are trying this on? Here are a few options that have worked in the past:

1. Omitting the meta tag entirely sometimes gets zoom to work through the app

2. Try removing the meta line width=device-width

Does it zoom on orientation change? Because there was a bug up until iOS6 that meant a page would zoom on orientation and it was necessary to include a JS solution to fix it. (http://adactio.com/journal/4470/ and https://github.com/scottjehl/iOS-Orientationchange-Fix)

 

0 Kudos
Mercedes_B_
Beginner
610 Views

This is Android only.

None of your suggestions work. This behavior is like the webview is disabled from pinch / zoom.  Even putting a url in an iframe it will not pinch / zoom, so the user experience is limited all around.  This is unacceptable as this is a user expectation with mobile devices.

Any other alternatives?

0 Kudos
Anusha_M_Intel1
Employee
610 Views

I actually got it to work for like 5 minutes and excitedly posted a solution for you. But it isn't working any longer. It looks like the problem only lies with the user-scalable=yes tag line as others like initial-scale are working fine. This might be a bug. I am going to have to take some time looking into it or report it to the Intel Engineer working on this. I will try to get this fixed at the earliest. Thank You for your patience. 

 

0 Kudos
PaulF_IntelCorp
Employee
610 Views

Build with Crosswalk and debug using the Debug tab (which runs on Crosswalk). It is likely that the zoom problems you are having are due to the many feature problems in the native Android device webviews. Crosswalk replaces the webview and gets rid of most of these problems. For more information -> http://blogs.intel.com/evangelists/2014/09/02/html5-web-app-webview-app

0 Kudos
Reply