1 Reply Latest reply on Feb 28, 2017 9:38 AM by kerrishotts

    Differences between Android, iOS and Web Browser View / Functionality

    Charlie28000

      Goal: I'd like to develop an app for Android and iOS.

       

      Current status: I started developing it and already tested it on Android and iOS, but I came across a few problems:

       

      1. Some elements (buttons, to be specific) are a bit messed up, they appear to change their sizes, although I assigned fixed values.

      2. In order to run the app on Android or in a browser I need to use onclick while on iOS it's ontouchstart.

       

      So my first question would be if I should concentrate on one platform and the PhoneGap build service will take care of the rest? Or do I need to consider things like that in my code?

       

      As the app doesn't look very nice when displayed in a browser my second question would be how to display the elements nicely when looking at the app in a browser while keeping my current configuration when the app is displayed on a phone.

       

      Thanks in advance!

        • 1. Re: Differences between Android, iOS and Web Browser View / Functionality
          kerrishotts Adobe Community Professional

          So, specifically to your numbered points:

           

          1. Without seeing a screenshot, it's hard to diagnose, but my guess is you're running into the fact that different webviews have different default metrics for various widgets. This is why stylesheets that reset or normalize those metrics are so popular. However, it's also possible you're just seeing differences arising from different viewport sizes, etc., in which case you should design your app to be responsive to various form factors and viewports.
          2. According to http://caniuse.com/#feat=touch Android fully supports touch events. However, my suggest is to use a library that abstracts away from those entirely. For example, FastClick by ftlabs  will generate synthetic "click" events on those devices that use touch, allowing you to use a single handler for both desktop and mobile (while also enabling quick response on mobile). Alternatively, you might also look at Hammer.JS - Hammer.js which lets you use lots of gestures.

           

          To your remaining questions:

           

          1. PhoneGap Build will not change your web code in order to work on other devices. The expectation is that you have already done that work. If the app doesn't look right now when using Chrome for Android, it probably won't look right when using PhoneGap Build.
          2. Search Google/Bing/etc. for responsive design. The goal is to make your app work well with almost any form factor and viewport, not tie the app to a specific form factor and viewport. There are lots of ways to accomplish this, but it's difficult to offer any further help without seeing your app.
          1 person found this helpful