Значение аргумента области просмотра device-width; для ширины ключа не распознается. Контент игнорируется

Я пытаюсь установить разные окна просмотра для разных устройств 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 эта ошибка

Значение аргумента области просмотра "ширина устройства;" для ключа "ширина" не распознается. Контент игнорируется.

Значение аргумента области просмотра "ширина устройства;" для ключа "ширина" не распознается. Контент игнорируется.

Ключ аргумента области просмотра "; начальный масштаб" не распознается и игнорируется.

Значение аргумента области просмотра "нет;" для ключа "масштабируемый пользователем" не распознается. Контент игнорируется.

Ключ аргумента области просмотра "устройство-dpi" не распознается и игнорируется.

Какие-либо предложения. Извините за плохое редактирование, я не могу его редактировать.

РЕДАКТИРОВАТЬ:

При этом мой Viewport все еще не работает на устройствах Android. Я хочу, чтобы я использовал только один CSS и tat css должен масштабировать изображения в соответствии с устройством.

Для этого я использовал Viewport с target-dpide density и дал начальный и максимальный масштаб в первый раз, когда он работал, но теперь, когда я запускаю этот подход на Android, он игнорирует Viewport.

На самом деле проблема в том, что когда я устанавливаю изображение в фоновом режиме в html и запускаю это приложение на любом устройстве Android, оно дает изображение в настроении масштабирования. Для этого я меняю свои файлы html и app.java скина и отключаю настройку масштабирования, а также использую target-dpide density, но все методы не работают. Вот html-код:

html

Вот файл css:

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

}

div {ширина: 1280 пикселей; высота: 670 пикселей; }

домой {

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;

}

Это из-за дроидов или кордового взгляда


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
небольшой вопрос. Почему вы присваиваете метатегу идентификатор, если вы его не используете?   -  person Raanan Avidor    schedule 24.03.2013
comment
На самом деле id не включен, я просто тестировал таким образом. И я использую мета, потому что 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

Имейте в виду, что вы должны разделять аргументы содержимого области просмотра «,» (как в ответе выше), а не «;» (что будет рассматриваться как часть значения и может вызвать неожиданное поведение)

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