CODEWITHSUNDEEP
androidcordovacordova-plugins
Lez77
Lez77

Reputation: 147

Cordova 6.3.1 ignores viewport meta tag

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>

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="[email protected]" 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?

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
    }
}

Upvotes: 0

Views: 965

Answers (1)

Lez77
Lez77

Reputation: 147

This seems to be a known bug [CB-12015] initial-scale values less than 1.0 are ignored on Android - ASF JIRA

I have decided to go with the workaround mentioned in the UPDATE section above.

Upvotes: 1

Related Questions