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

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

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

<!-- 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" />

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

В качестве альтернативы этот метатег хорошо работает на телефонах

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

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

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

Ответ 1

Итак, вы хотите изменить динамическую ширину тега viewport.

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

<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

Ответ 2

Попробуйте следующее:

<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 при ширине = ширина устройства, так что страница точно соответствует окну. Когда вы устанавливаете определенную ширину видового экрана, вы не хотите устанавливать начальную шкалу в 1 (иначе страница начнет увеличиваться).

Ответ 3

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

Вот что я делаю для области просмотра:

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

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

@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;
    }

}

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

здесь больше в другом примере

Ответ 4

Код 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:

Установить минимальную ширину в метаданных в viewport

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

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

Ответ 5

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

body {
  min-width: 450px;
}

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

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