Login/Register
Viewport argument value "device-width;" for key "width" not recognized. Content ignored
Asked Answered
Solved javascripthtmlibm-mobilefirst
C

3

5

I am trying to set different Viewports for different android devices. for this i use this piece of code.

<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 problem is that it not setting the appropriate content values. and in Logcat giving this error

Viewport argument value "device-width;" for key "width" not recognized. Content ignored.

Viewport argument value "device-width;" for key "width" not recognized. Content ignored.

Viewport argument key ";initial-scale" not recognized and ignored.

Viewport argument value "no;" for key "user-scalable" not recognized. Content ignored.

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

Any Suggestions. Sorry for the poor editing i am unable to edit it.

EDIT:

At that my Viewport is still not working on android devices. I want that i should use only one css and tat css should scale images according to the device.

For this i used Viewport with target-dpidensity and gave intial and maximum scale first time it was working but now when i run this approach on android it ignore Viewport.

Actually problem is that when ever i set image in background in html and run this app on any android device it gives image in zoom mood. For this i change my skin html and app.java file and disable zoom mood and also used target-dpidensity but all methods are not working Here is html code:

html

Here is css file:

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

}

div { width: 1280px; height: 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;

}

Is its because of droidgap or cordove view

Cassandracassandre answered 22/3, 2013 at 10:3 Comment(7)
Related: stackoverflow.com/questions/3588628 – Jevons
yes i use same approach but its have errors. – Cassandracassandre
Did you see the comments on the top-voted answer? – Jevons
yes i used both methods but have no effect – Cassandracassandre
small question. Why are you giving the meta tag an ID if you are not using it? – Cami
Actually id is not included i was just testing through this way. And i am using meta because ibm is multiple platform supporter and i want that my web app run perfectly on all android, BB, iphone and desktop application. at this stage i am testing different html pages.at that time testing my first simple ibm hybrid app on android devices. – Cassandracassandre
Can you edit your post with how things actually are at this time? – Delores
C
7

I am not sure what you are trying to do in general and in the if specificly, but you can remove the meta tag from your HTML and use something like:

<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>
Cami answered 23/3, 2013 at 21:6 Comment(1)
thnaks for the help. but at that time Viewport is not working on my android devices – Cassandracassandre
P
10

I have solved it by removing the spaces after the comma

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

 <meta name="viewport" content="width=device-width,initial-scale=1">
Phidippides answered 17/10, 2016 at 9:24 Comment(0)
C
7

I am not sure what you are trying to do in general and in the if specificly, but you can remove the meta tag from your HTML and use something like:

<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>
Cami answered 23/3, 2013 at 21:6 Comment(1)
thnaks for the help. but at that time Viewport is not working on my android devices – Cassandracassandre
B
7

Be aware that you have to separate the arguments of the viewport-content by "," (as in the answer above) not by ";" (which will be regarded as part of the value and might cause unexpected behaviour)

Buoyage answered 1/7, 2013 at 12:59 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.