Geek asks and answers

Viewport argument "device width"; for the key "width" is not recognized. Content is ignored

I am trying to install different viewports for different Android devices. I use this piece of code for this.

<head>

<meta name="viewport" content="width=device-width; initial-scale=0.91; maximum-scale=0.91; user-scalable=0;target-densityDpi=device-dpi" />

<script>

if (window.devicePixelRatio == 1)
{
   document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale=0.51, maximum-scale=0.51, user-scalable=0,target-densityDpi=device-dpi');

} else if (window.devicePixelRatio == 2) {

   document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale=0.51, maximum-scale=0.51, user-scalable=0');

} else if (window.devicePixelRatio == .78) {

   document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale=0.51, maximum-scale=0.51, user-scalable=0, target-densityDpi=device-dpi');

} else if (window.devicePixelRatio == 1.5) {

   document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale=0.51, maximum-scale=0.51, user-scalable=0, target-densityDpi=device-dpi');

}

</script>

</head>

Now the problem is that it does not set the appropriate content values. and in logcat giving this error

Viewport argument value "device-width;" for the key "width" is not recognized. The content is ignored.

Viewport argument value "device-width;" for the key "width" is not recognized. The content is ignored.

The key to the Viewport argument, "start scale," is not recognized and ignored.

Viewport argument value "no;" for a key "custom scalable" is not recognized. The content is ignored.

The Viewport argument key "device-dpi" is not recognized and ignored.

. , .

EDIT:

Viewport - Android. , css, tat css .

Viewport , , , Android, Viewport.

, html Android, . html app.java , , html-:

html

css:

body {
background-repeat: no-repeat;
margin: 0;

}

div {   : 1280 ;   : 670px; }

home {

background-image: url('../images/abc_title.png');
width: 1280px;
height: 670px;

}

abc_slide {

position: relative; background : transparent;
width: 129px;
height: 76px;
background: transparent; width : 129px; height : 76px;
margin-top: 80px;
margin-left: 80px;
        border: thin;

}

song_slide {

position: relative;
background: transparent;
margin-top: 80px;
margin-left: 80px; width : 129px;
height: 76px;
width: 129px;
    border: thin;

}

-

+5
3

, , , HTML - :

<script>
    var viewportContent = '';
    if (window.devicePixelRatio = 1) {
        viewportContent = 'width=device-width, initial-scale=0.51, maximum-scale=0.51, user-scalable=0, target-densityDpi=device-dpi';
    } else if (window.devicePixelRatio == 2) {
        viewportContent = 'width=device-width, initial-scale=0.51, maximum-scale=0.51, user-scalable=0';
    } else if (window.devicePixelRatio == .78) {
        viewportContent = 'width=device-width, initial-scale=0.51, maximum-scale=0.51, user-scalable=0, target-densityDpi=device-dpi';
    } else if (window.devicePixelRatio == 1.5) {
        viewportContent = 'width=device-width, initial-scale=0.51, maximum-scale=0.51, user-scalable=0, target-densityDpi=device-dpi';
    }
    $('head').append('<meta name="viewport" content="' + viewportContent + '">');
</script>
+6

, "," ( ), ";" ( )

+7

,

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

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

More articles:


All Articles