9 Replies Latest reply on Mar 6, 2013 1:34 PM by posit-labs

    Disable select & zoom on iOS?

    salisylic Level 1

      I'm using Adobe Edge Inspect on iOS to make interaction prototypes. Is it possible to disable text selection & double-tap zooming in the Edge Inspect iOS app or through the Edge Animate application on the desktop? The text selection and zooming behaviors are messing up my interactions.

       

      Thanks for any advice.

        • 1. Re: Disable select & zoom on iOS?
          salisylic Level 1

          I found the solution. Putting this into the HTML-file's <head> element works:

          <meta name="viewport" content="user-scalable=0"/>
          <style type="text/css">
          * {
              -webkit-touch-callout: none;
              -webkit-user-select: none;
          }
          </style>
          
          
          1 person found this helpful
          • 2. Re: Disable select & zoom on iOS?
            Mark_Rausch Adobe Employee

            Glad you got it working. Thanks for coming back and posting your solution

            • 3. Re: Disable select & zoom on iOS?
              posit-labs Level 1

              I'm having a similar problem testing on android. The solution above doesn't fix zooming. I think it may have something to do with the fact that android has some mystery proprietary default browser. There doesn't seem to be a way to uninstall it (without rooting), and I have already set my default browser to chrome.

               

              Using Conditionizr, this is what I get for OS / browser:

              Browser: retina

              OS: Linux

               

              It seems that Inspect completely ignores the default browser setting, which is incredibly frustrating. Is there somewhere I can post a bug report?

              • 4. Re: Disable select & zoom on iOS?
                Mark_Rausch Adobe Employee

                The Android client isn't using a mystery, proprietary browser, it's using a WebView component. Similarly, the iOS client uses a UIWebView component. To add in browser settings to the Edge Inspect client so you can mimic the browser settings is a feature request I can pass along to our product manager.

                 

                Can you post more information about what you're putting into your HTML/CSS and some screenshots of how it's being handled differently between the native Android browser and Edge Inspect?

                • 5. Re: Disable select & zoom on iOS?
                  posit-labs Level 1

                  There is no difference between the Android browser and Edge. The problem is that I don't want to test the site using the native browser. I need to test it using Chrome, but there's no way to specify what browser Edge uses.

                   

                  I can set a browser default on the OS, but Edge ignores this setting.

                  • 6. Re: Disable select & zoom on iOS?
                    Mark_Rausch Adobe Employee

                    Aha, I understand now. The short answer is that this is not a bug.

                     

                    The purpose of Edge Inspect is to test how a web page will look on a mobile device using the default browser. We use the WebView component and build it into our Android client so that we have full control over the browser and can catch events like page load complete and do things like injecting javascript into the page for remote inspection. We can't do those things with standalone browsers like Chrome.

                     

                    If you need to test with Chrome, I think you could still use Inspect, but when the page is loaded in the Android client, you'd need to perform an extra step and click the button in the upper right corner of the app and choose "Open in Browser"... that should open the same URL in Chrome if that's your default.

                     

                    Hope this helps,

                    Mark

                    • 7. Re: Disable select & zoom on iOS?
                      posit-labs Level 1

                      I can inspect the initial state of the page when I use the "open in browser" method. It doesn't update itself to match what's on the page. It's kind of inconvenient.

                       

                      Maybe there's some way you can integrate Edge with the adb remote debugger (since it's open source, and all). It does exactly what I need it to. It opens up an inspector page with all of the standard Chrome inspector tabs.

                       

                      https://developers.google.com/chrome-developer-tools/docs/remote-debugging

                       

                      Thanks for your help, Mark!

                      • 8. Re: Disable select & zoom on iOS?
                        Mark_Rausch Adobe Employee

                        Thanks for the suggestion. Unfortunately I doubt we'd go this route since it would be Android-only. Out of curiousity, did you choose Chrome because of that adb workflow? Or is Chrome on Android a requirement for you?

                         

                        Have you tried the built-in remote debugging capabilities in Edge Inspect (using weinre)? It has the advantage of working with both Android and iOS.

                         

                        Thanks,

                        Mark

                        • 9. Re: Disable select & zoom on iOS?
                          posit-labs Level 1

                          Yes, Chrome on Android is a project-specific requirement. I do use the weinre inspector for a lot of things, but I have to use adb to debug Chrome.