CODEWITHSUNDEEP
androidhtmlcssiphonemeta-tags
Learner
Learner

Reputation: 203

How to enable zoom in meta tag?

I am working on a node.js application which is aswell operate on mobiles . But on some handsets its not zooming what may reason?

My meta tags of that page are

<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

this is page on which I want to add pinch zoom . And the meta tags I added are of index.html which is parent page of my application. So what Mainly cause can be ?

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="icon" href="favicon.ico">
    <script src="samples.js"></script>
    <title>Chart.js samples</title>
</head>
<body>
    <div class="content">
        <div class="header">
            <div class="chartjs-title">Samples</div>
            <div class="chartjs-caption">Simple yet flexible JavaScript charting for designers &amp; developers</div>
            <div class="chartjs-links">
                <a class="btn btn-chartjs" href="http://www.chartjs.org">Website</a>
                <a class="btn btn-docs" href="http://www.chartjs.org/docs">Documentation</a>
                <a class="btn btn-gh" href="https://github.com/chartjs/Chart.js">GitHub</a>
            </div>
        </div>

        <div id="categories" class="samples-categories"></div>
    </div>

    <script>
        function createCategory(item) {
            var el = document.createElement('div');
            el.className = 'samples-category';
            el.innerHTML =
                '<div class="title">' + item.title + '</div>' +
                '<div class="items"></div>';
            return el;
        }

        function createEntry(item) {
            var el = document.createElement('div');
            el.className = 'samples-entry';
            el.innerHTML = '<a class="title" href="' + item.path + '">' + item.title + '</a>';
            return el;
        }

        var categories = document.getElementById('categories');
        Samples.items.forEach(function(item) {
            var category = createCategory(item);
            var children = category.getElementsByClassName('items')[0];

            (item.items || []).forEach(function(item) {
                children.appendChild(createEntry(item));
            });

            categories.appendChild(category);
        });
    </script>
</body>
</html>

Upvotes: 1

Views: 8384

Answers (3)

Priyanjit
Priyanjit

Reputation: 305

Remove user-scalable=no from your html. It does not allow zoom in and zoom out.
Check this link

Upvotes: 0

siawo
siawo

Reputation: 246

You should use this meta tag for the viewport meta, actually you have used user-scalable:0 which does not allow the user to zoom in or zoom out. 

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

Upvotes: 0

83N
83N

Reputation: 286

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

Upvotes: 3

Related Questions