Viewport стойност на аргумента device-width; за неразпозната ширина на ключа. Съдържанието е игнорирано

Опитвам се да задам различни Viewports за различни Android устройства. за това използвам тази част от кода.

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

Сега проблемът е, че не задава подходящите стойности на съдържанието. и в Logcat дава тази грешка

Стойност на аргумента Viewport "device-width;" за ключ "ширина" не е разпознат. Съдържанието е игнорирано.

Стойност на аргумента Viewport "device-width;" за ключ "ширина" не е разпознат. Съдържанието е игнорирано.

Ключът на аргумента на Viewport ";initial-scale" не е разпознат и игнориран.

Стойност на аргумента на Viewport "не" за ключ "user-scalable" не е разпознат. Съдържанието е игнорирано.

Ключът на аргумента на Viewport "device-dpi" не е разпознат и игнориран.

Някакви предположения. Съжалявам за лошото редактиране, но не мога да го редактирам.

РЕДАКТИРАНЕ:

При това моят Viewport все още не работи на устройства с Android. Искам да използвам само един css и tat css трябва да мащабира изображенията според устройството.

За това използвах Viewport с target-dpidensity и дадох начален и максимален мащаб за първи път, когато работеше, но сега, когато стартирам този подход на android, той игнорира Viewport.

Всъщност проблемът е, че когато задам изображение във фонов режим в html и стартирам това приложение на всяко устройство с Android, то дава изображение в настроение за увеличение. За това промених моя скин html и app.java файла и деактивирах zoom mood и също използвах target-dpidensity, но всички методи не работят Ето html код:

html

Ето го css файл:

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

}

div {ширина: 1280px; височина: 670px; }

У дома {

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;

}

песен_слайд {

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

}

Това е заради droidgap или cordove view


javascript html ibm-mobilefirst
person User42590    schedule 22.03.2013    source източник
comment
Свързани: stackoverflow.com/questions/3588628   -  person Diego Agulló    schedule 22.03.2013
comment
да, използвам същия подход, но има грешки.   -  person User42590    schedule 22.03.2013
comment
Видяхте ли коментарите за най-гласувания отговор?   -  person Diego Agulló    schedule 22.03.2013
comment
да, използвах и двата метода, но няма ефект   -  person User42590    schedule 22.03.2013
comment
малък въпрос. Защо давате ID на мета тага, ако не го използвате?   -  person Raanan Avidor    schedule 24.03.2013
comment
Всъщност идентификаторът не е включен, просто тествах по този начин. И аз използвам meta, защото ibm поддържа множество платформи и искам моето уеб приложение да работи перфектно на всички приложения за Android, BB, iphone и настолни компютри. на този етап тествам различни html страници. По това време тествам първото си просто ibm хибридно приложение на устройства с Android.   -  person User42590    schedule 25.03.2013
comment
Можете ли да редактирате публикацията си така, както всъщност стоят нещата в момента?   -  person Idan Adar    schedule 25.03.2013

Отговори (3)


arrow_upward
7
arrow_downward

Не съм сигурен какво се опитвате да направите като цяло и конкретно в if, но можете да премахнете мета тага от вашия 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>
person Raanan Avidor    schedule 23.03.2013
comment
Благодаря за помощта. но по това време Viewport не работи на моите Android устройства - person User42590; 25.03.2013

arrow_upward
7
arrow_downward

Имайте предвид, че трябва да разделите аргументите на viewport-content с "," (както в отговора по-горе), а не с ";" (което ще се разглежда като част от стойността и може да причини неочаквано поведение)

person Peter T.    schedule 01.07.2013

arrow_upward
7
arrow_downward

Реших го, като премахнах интервалите след запетаята

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

 <meta name="viewport" content="width=device-width,initial-scale=1">
person Adel    schedule 17.10.2016