Достижение минимальной ширины с метатегом viewport

Я бы ширина просмотра равной Майкоп пока Майкоп > 450px или 450px в противном случае (мой макет динамически масштабируется, но не выглядит хорошо ниже 450px).

следующие два мета-тега хорошо работают на планшетах, где ширина устройства > 450px:

<!-- uses device width -->
<meta name="viewport" content="width=device-width" />

<!-- use of initial-scale means width param is treated as min-width -->
<meta name="viewport" content="width=450, initial-scale=1.0" />

однако на телефонах (где, например, ширина устройства=320px) первый слишком тонкий для содержимого; а последний вызывает браузер чтобы увеличить масштаб, пользователь должен вручную уменьшить масштаб, чтобы увидеть содержимое.

кроме того, этот мета-тег хорошо работает на телефонах

<meta name="viewport" content="width=450" />

но не использует дополнительную ширину, доступную на планшетах.

любая помощь / идеи были бы действительно оценены (и если это имеет значение, я использую GWT).

56
gwt html media-queries meta

5 ответов

Итак, вы хотите изменить viewport ширина тега dynamicaly .

здесь вы идете :

<meta id="myViewport" name="viewport" content="width = 380">
<script>
window.onload = function () {
    var mvp = document.getElementById('myViewport');
    mvp.setAttribute('content','width=580');
}
</script>

см.:http://www.quirksmode.org/mobile/tableViewport.html

35

попробуйте это:

<meta id="vp" name="viewport" content="width=device-width, initial-scale=1">
<script>
window.onload = function() {
    if (screen.width < 450) {
        var mvp = document.getElementById('vp');
        mvp.setAttribute('content','user-scalable=no,width=450');
    }
}
</script>

обратите внимание, что я поменял "начальный масштаб=1", так как я думаю, что вы ошиблись. Вы хотите, чтобы initial_scale был установлен в 1, когда width=device-width, чтобы страница точно вписывалась в окно. Когда вы устанавливаете определенную ширину видового экрана, вы не хотите устанавливать начальную шкалу в 1 (иначе страница начнет увеличиваться).

14

используйте тег @media и css. Это творит чудеса. Хотя он не предоставляет минимальную ширину для порта просмотра, это предпочтительный способ пойти.

вот что я делаю для просмотра:

<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=yes, minimum-scale=1.0, maximum-scale=2.0">

затем я настраиваю размер панели, прикрепленной к окну просмотра:

@media all and (max-width: 1024px) {
    /*styles for narrow desktop browsers and iPad landscape */
       .myContentPanel{
         width: 450;
    }    
}


@media all and (max-width: 320px) {
   /*styles for iPhone/Android portrait*/
      .myContentPanel {
         width: 320;
    }

}

очевидно, что вы также можете иметь промежуточные размеры...

вот еще один пример

5

код JavaScript, приведенный в других ответах, не работает в Firefox, но он будет работать, если вы удалите мета-тег и вставьте новый.

<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
if (screen.width < 450){
    var viewport = document.querySelector("meta[name=viewport]");
    viewport.parentNode.removeChild(viewport);

    var newViewport = document.createElement("meta");
    newViewport.setAttribute("name", "viewport");
    newViewport.setAttribute("content", "width=450");
    document.head.appendChild(newViewport);
}
</script>

или просто всегда вставляйте его в JavaScript:

<script>
var viewport = document.createElement("meta");
viewport.setAttribute("name", "viewport");
if (screen.width < 450) {
    viewport.setAttribute("content", "width=450");
} else {
    viewport.setAttribute("content", "width=device-width, initial-scale=1");
}
document.head.appendChild(viewport);
</script>

для моего здравомыслия я написал polyfill, чтобы просто добавить min-width атрибут к метатегу viewport:

установите min-width в метатеге окна просмотра

С этим, вы могли бы просто сделать:

<meta name="viewport" content="width=device-width, initial-scale=1.0, min-width=450" />
<script type="text/javascript" src="viewport-min-width.js"></script>
3

короче говоря, нет необходимости устанавливать минимальную ширину на видовом экране, потому что вы можете установить его на body или html элемент вместо этого, чтобы сделать их и их содержимое шире, чем видовое окно. Пользователь сможет прокручивать или уменьшать содержимое.

body {
  min-width: 450px;
}

Я сделал несколько тестов в Chrome для Android, и он масштабирует шрифты некоторых элементов, если ширина окна просмотра установлена на что-либо другое, чем device-width. Также shrink-to-fit=yes полезно иметь страницу, уменьшенную первоначально.

наконец, этот подход поддерживает настольные браузеры, которые могут иметь странные размеры окон или текущие настройки масштабирования (оба из которых влияют на сообщаемые размеры видового экрана), но не соблюдают мета-тег видового экрана.

0