4 Replies Latest reply on Oct 12, 2016 8:04 AM by dank77762582

    Graphics cut off

    dank77762582

      My app runs on both iOS and Android. On iOS, no troubles, but on Android the page cuts off the content. It looks like the size of the cutoff is equal to the status bar + the navigation bar.

      Here are the relevant preferences:

          <preference name="fullscreen" value="false" />

           <preference name="StatusBarOverlaysWebView" value="false" />    

          <preference name="StatusBarBackgroundColor" value="#000000" />

          <preference name="StatusBarStyle" value="lightcontent" />

       

      On iOS (iPhone 6+ and iPhone 5) the graphics scale as you'd expect. The top of the screen has a black status bar; nothing on the bottom and the graphics scale correctly on both phones.

       

      On Android (a 5.5 inch and 4.0 inch) the graphics don't scale. I have a status bar at the top, and Android's soft navigation bar at the bottom. The graphics are cut off at the bottom of the screen.

       

      Any ideas?

      Thanks,

      dk

        • 1. Re: Graphics cut off
          kerrishotts Adobe Community Professional

          It might help to see a screenshot, your entire config.xml (minus identifying/secret information), and the HEAD portion of your index.html file (particularly the viewport meta tag).

           

          Just guessing here, but did you build your app following responsive design techniques, or did you design to a particular form factor? Your app should always be able to lay the UI out appropriately regardless of form factor (within reason, of course). There are a lot of great resources online regarding responsive design -- Google will turn up a lot of them.

          • 2. Re: Graphics cut off
            dank77762582 Level 1

            OK, here's iPhone screen capture, followed by an Android one. There are just four images on the page. Android doesn't seem t have the page height correct. My guess is that it's off by the statusbar + navbar pixel values.

             

            I know I must be missing something basic here. Any ideas? Thanks.

             

            Here's a link to the project zip file: https://db.tt/pKuVNAYm

             

            iphoneGraphic.jpeg

            android:

            androidGraphic.png

            • 3. Re: Graphics cut off
              kerrishotts Adobe Community Professional

              Google "Responsive Web Design". There are several concepts involved in this umbrella term that would help you address your problems.

               

              Quickly, however:

               

              • You appear to be designing to a specific device. Don't. Other devices vary widely. You need to consider pixel density and aspect ratio in your designs.
              • The reason your app appears to be scaling fine on various iPhones is because you haven't specified any splash screens. Because there are none, the newer iPhones will default to the older scaling (in short: scale everything up). This is far from ideal, and you shouldn't do this. Instead, supply appropriately-sized splash screens and the app will render at the device's native resolution. At this point, I would expect you to see quite a varied response based on the device you're running on.
              • Android devices are all over the map when it comes to pixel density and aspect ratio. Because you've designed to specific values of these traits, you're going to have trouble with any other device. In your screenshot above, your only option here is to allow the user to scroll in order see both, OR, reduce the height of both images.

               

              Responsive web design is too big of a topic to delve into in this post. However, most of my design boils down to this:

               

              • Never design to a specific form factor, aspect ratio, or pixel density. (Create many different mock ups so that you can get a feel for how you want your app to look on different devices.)
              • Don't use "px" units unless absolutely necessary. Note: "0" is not a px unit; it's unit-less. Exception: Sometimes one expects a certain size, like navigation bars on iOS should be 44 (logical) pixels high. In that case, 44px is fine as long as you know the content will never be sized differently or overflow.
              • Use REM and EM where feasible. Use percentages as well.
              • Avoid scaling images by too much -- this slows performance. If applying a percentage to one axis, you may need to limit the size of the other axis in order to prevent an image from getting out of hand. Supply multiple images for varying pixel densities so that the browser doesn't have to scale a lot.
              • If using a photographic image, consider scaling to fit or fill while maintaining aspect ratio. This allows the browser to scale to either fit within a container or fill a container (the latter will crop the edges of the image).
              • For non-photographic images, use vectors like SVGs or fonts.
              • Position elements based upon their relationship to their containers. This will be a combination of relatively and absolutely positioned elements. Absolutely positioned elements are relative to their nearest relatively positioned container.
              • Use other layouts, like flex box. Don't over do (can be slower), but flex box is great for UI layout.
              • Use media queries to tweak layout for various sizes. I advise against too many of these, since it can start to be difficult to hold all the breakpoints in your head. But these are great for managing layout based on orientation or removing/showing elements if the screen real estate is really narrow or wide for example.
              • Forget the notion of pixel perfection. It's been long gone anyway, and there's no hope of achieving it. Instead lay out your interface according to visual rhythm, and you should be good.

               

              For an example, see  http://codepen.io/kerrishotts/pen/OMbMaj . This was based on a post on the Google Groups forum, but it might be useful in your case as well to get a feel for how flex box and responsive design can support lots of screen sizes. For a more complete example, see https://www.photokandy.com/supporting/writings/logology/index.html (chrome/safari; you'll need to open the web inspector so you can inspect the classes and styling being applied). For the corresponding Cordova app and source code, links to the related book, and links to the app stores, see https://www.photokandy.com/apps/logology/

              • 4. Re: Graphics cut off
                dank77762582 Level 1

                OK, I understand all that. The issue is that non-immersive mode changes the page height, but phonegap keeps the original height which causes the graphics to run over into the footer.

                 

                To your point, I went back and rewrote my test using flexbox. Same problem.

                I posted a note on stackoverflow with screenshots to see if anyone has an idea.

                http://stackoverflow.com/questions/39998545/android-immersive-vs-non-immersive-modes-page- height

                Thanks.