3 Replies Latest reply on Oct 20, 2016 1:33 AM by lz777

    Viewport meta tag is ignored on Android

    lz777

      My question is actually related to Cordova, but since PhoneGap is closely related I hope maybe somebody can help me with this one.

      I'm trying to use viewport meta tag to scale down my html layout which is larger then device' width. However it seems that viewport meta is being ignored.

      I'm using Cordova 6.3.1 CLI and the following simple html file for testing:

       

          <html>
          <head>
              <meta charset="utf-8">
              <!--<meta name="viewport" content="width=600" />-->
              <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"  />
              <title>Test</title>
          </head>
          <body>
           <!--<div style=" background:#CCC; width: 1280px; height: 800px;"></div>-->
           <img src="test.jpg" width="1280" height="800"/>
          </body>
          </html>
      

       

      I also tried setting initial scal to 0.5  and other values, and also tried just setting width=600.

      Config xml is as follows:

       

         <?xml version='1.0' encoding='utf-8'?>
          <widget id="com.example.myapp" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
              <feature name="Whitelist">
                  <param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin" />
                  <param name="onload" value="true" />
              </feature>
              <name>My App</name>
              <description>My App Desciption</description>
              <author email="contacts@myself.com" href="http://www.example.com/">
                  myself
              </author>
              <content src="index.html" />
              <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:*" />
              <allow-intent href="market:*" />
              <icon density="ldpi" src="icons/drawable-ldpi/ic_launcher.png" />
              <icon density="mdpi" src="icons/drawable-mdpi/ic_launcher.png" />
              <icon density="hdpi" src="icons/drawable-hdpi/ic_launcher.png" />
              <icon density="xhdpi" src="icons/drawable-xhdpi/ic_launcher.png" />
              <icon density="xxhdpi" src="icons/drawable-xxhdpi/ic_launcher.png" />
              <icon density="xxxhdpi" src="icons/drawable-xxxhdpi/ic_launcher.png" />
              <preference name="loglevel" value="DEBUG" />
          </widget>
      

       

      But none of this scales my html page down to fit the screen. I've tested on Android 4.4 and 5.1

      Is there some setting I'm missing?

       

      Should I maybe switch to PhoneGap to have scaling functionality enabled for Android?

       

      Thank you for attention to this!

       

       

      UPDATE

       

      I have figured out that I could update onCreate method as follows to scale my webpage to 63%.

      But still viewport tag does not play any role in this workaround - you simply remove it.

      public class MainActivity extends CordovaActivity

      {

         @Override
         public void onCreate(Bundle savedInstanceState)

        {

         super.onCreate(savedInstanceState);
        if (appView == null) {

        init();
         }

       

         // If keepRunning
         this.keepRunning = preferences.getBoolean("KeepRunning", true);

         ((WebView) appView.getView()).getSettings().setUseWideViewPort(true);
         ((WebView) appView.getView()).setInitialScale(63);
         appView.loadUrlIntoView(launchUrl, true); // Set by <content src="index.html" /> in config.xml
         }

      }