3 Replies Latest reply on Oct 26, 2016 1:19 AM by VectorP

    Android Multiple Screen Display and Dimensions

    VonnieGlz

      Hello,

      I am new to app development and I have been learning as I go. I have an issue with the Android build. The visual output of our Android app is not consistent across our test devices.  For example on a Galaxy Note 3 and Samsung Note Edge the app displays 1/3 smaller than the screen. On an LG Stylus the app fills the screen and is about 20 pixels too tall and too wide. After doing research I could not figure out what would cause this other than, perhaps, screen density settings.  Below is a list of the different settings that we have implemented. I am wondering if we are missing something obvious or have approached this wrong. Do we have the right config settings or our images not properly sized?

       

      A little history... we created an earlier version of this app and we had a sizing/ scaling issue but it was resolved by adding the metatag for the viewport and adjusting the parameters. We also changed viewport settings in our CSS to use device-width (see CSS snippet below.) However, those settings are not fixing the issue we are experiencing now.

       

      Any help is appreciated!

      Thank you.

       

       

      Current Viewport CSS:

      @-ms-viewport
      {
      width: device-width;
      }

      @-webkit-viewport
      {
      width: device-width;
      }

      @-o-viewport
      {
      width: device-width;
      }

      @-moz-viewport
      {
      width: device-width;
      }

      @viewport
      {
      width: device-width;
      }

      .html
      {
      background-color: #FFFFFF;
      }

      #page
      {
      z-index: 1;
      width: device-width;
      height: devide-height;
      background-image: none;
      border-style: none;
      border-color: #000000;
      background-color: transparent;
      }

       

      Originally we made a reference to the target-densitydpi parameter but we learned that it was deprecated.

       

      Original Viewport Meta tag in Header with target-densitydpi:

      <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height= device-height,target-densitydpi=medium-dpi,user-scalable=no"/>

       

      New HTML Viewport Meta tag in Header with JQuery code to set the density in the viewport:

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

       

      JQuery code
      to set density

      function setDPI()

      {
           var viewportScale = 1 / window.devicePixelRatio;

      $("#viewport").attr("content","user-scalable=no, nitial-scale="+viewportScale+", minimum-scale=0.2, maximum-scale=1, width=device-width");

      }

       

      DPI Image Information Table:

      Image Resource

      Width

      Height

      Resolution

      src="androidl.png"   density="ldpi"

      320

      480

      120

      src="androidm.png"   density="mdpi"

      480

      800

      160

      src="anroidh.png"   density="hdpi"

      480

      854

      240

      src="androidx.png"    density="xhdpi"

      540

      960

      320

      src="androidxx.png"  density="xxhdpi"

      1280

      720

      480

      src="androidxxx.png"   density="xxxhdpi"

      1920

      1080

      640

       

      Current Config:

      <?xml version="1.0" encoding="UTF-8"?>
      <widget xmlns     = "http://www.w3.org/ns/widgets"
              xmlns:gap = "http://phonegap.com/ns/1.0"
              id        = "com.americanexpress.amex4you"
              version   = "2.0.0">

          <name>Our App</name>

          <description>
             Our App is a mobile application for Our Company New Hires.
          </description>

       

          <author href="http://ourcompanycom" email="ouremail@ourcompany.com">
              AmericanExpress
          </author>

         
          <preference name="orientation"                value="portrait" />       
          <preference name="target-device"              value="universal" />     
          <preference name="fullscreen"                 value="true" /> 
            <preference name="EnableViewportScale"        value="true" />
          <preference name="android-minSdkVersion"      value="15" />
          <preference name="android-targetSdkVersion"   value="16" />
          <preference name="android-maxSdkVersion"      value="24" />        

          <preference name="android-installLocation"    value="auto" />     
            <preference name="phonegap-version"           value="cli-6.3.0" />    

          <!-- Core plugins -->
          <plugin name="cordova-plugin-battery-status" />
          <plugin name="cordova-plugin-camera" />
          <plugin name="cordova-plugin-media-capture" />
          <plugin name="cordova-plugin-console" />
          <plugin name="cordova-plugin-device" />
          <plugin name="cordova-plugin-geolocation" />
          <plugin name="cordova-plugin-globalization" />
          <plugin name="cordova-plugin-inappbrowser" />
          <plugin name="cordova-plugin-media" />
          <plugin name="cordova-plugin-network-information" />
          <plugin name="cordova-plugin-inappbrowser" />
          <plugin name="cordova-plugin-whitelist" />

       

          <!-- Define app icon for each platform. -->
          <icon src="icon.png" />

       

          <!-- Define app splash screen for each platform. -->
         <platform name="android">
               <splash src="androidl.png"    density="ldpi" />
              <splash src="androidm.png"    density="mdpi" />
              <splash src="anroidh.png"    density="hdpi" />
               <splash src="androidx.png"   density="xhdpi" />
               <splash src="androidxx.png"   density="xxhdpi" />
               <splash src="androidxxx.png"   density="xxxhdpi" />
         </platform>
       
      <plugin name="cordova-plugin-whitelist" />
         
        <access origin="*" />
           <allow-intent href="http://*/*" />
           <allow-intent href="https://*/*" />
           <allow-intent href="tel:*" />
           <allow-intent href="sms:*" />
           <allow-intent href="mailto:*" />
           <allow-intent href="geo:*" />
         
      <platform name="android">
              <allow-intent href="market:*" />
          </platform>

      </widget>

       

        • 1. Re: Android Multiple Screen Display and Dimensions
          VonnieGlz Level 1

          Images that demonstrate the output. The app should be scaled to fill the entire screen where the bottom edge of the image touches the bottom of the phone screen.  Also, I have included the CSS for the location page displayed below (in case that helps)

          Edge.jpg

          Note.jpg

           

          .version.location /* version checker */

          {

            color: #0000E0;

            background-color: #A72974;

          }

           

           

          @-ms-viewport

          {

            width: device-width;

          }

           

           

          @-webkit-viewport

          {

            width: device-width;

          }

           

           

          @-o-viewport

          {

            width: device-width;

          }

           

           

          @-moz-viewport

          {

            width: device-width;

          }

           

           

          @viewport

          {

            width: device-width;

          }

           

           

          .html

          {

            background-color: #F7F8FA;

          }

           

           

          #page

          {

            z-index: 1;

            width: device-width;

            height: device-height;

            background-image: none;

            border-style: none;

            border-color: #000000;

            background-color: transparent;

            padding-top: 391px;

            padding-bottom: 0px;

          }

           

           

          #u3032

          {

            z-index: 5;

            width: 643px;

            background-color: transparent;

            position: relative;

          }

           

           

          #u14613

          {

            z-index: 11;

            width: 693px;

            height: 82px;

            border-style: none;

            border-color: transparent;

            background-color: #FFFFFF;

            border-radius: 15px;

            margin-left: 30px;

            margin-top: 9px;

            position: relative;

          }

           

           

          #u6565

          {

            z-index: 7;

            width: 716px;

            background-color: transparent;

            margin-left: 17px;

            margin-top: 46px;

            position: relative;

          }

           

           

          #u8390

          {

            z-index: 9;

            width: 261px;

            background-color: transparent;

            margin-left: 245px;

            margin-top: 140px;

            position: relative;

          }

           

           

          #u2989

          {

            z-index: 2;

            min-height: 313px;

            padding-bottom: 24px;

            background: transparent url("../images/pattern.png") no-repeat center top;

            background-size: cover;

          }

           

           

          #u2992

          {

            z-index: 3;

            width: 528px;

            background-color: transparent;

            position: relative;

            margin-right: -10000px;

            margin-top: 281px;

            left: 111px;

          }

           

           

          #u2989-bw

          {

            z-index: 2;

            min-height: 313px;

            margin-top: 48px;

          }

           

           

          body

          {

            position: relative;

            min-width: device-width;

          }

           

           

          #page .verticalspacer

          {

            clear: both;

          }

          • 3. Re: Android Multiple Screen Display and Dimensions
            VectorP Level 4

            I have no idea why you are trying to set all those widths  and heights.

            It should be sufficient to set:

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

             

            May I suggest you remove all those other settings (like #page {width: device-width; height: device-height;} and @-webkit-viewport{width: device-width;} ) and don't use any exact width values in pixels. Instead, create a liquid design, which makes use of percentages and units like 'vw'. Let the viewport do the scaling...it will do a nice job.