Достижение минимальной ширины с метатегом 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).

184   5  

5 ответов:

Итак, вы хотите изменить 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

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

<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 (иначе страница начнет увеличиваться).

используйте тег @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;
    }

}

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

вот еще в другом примере

код 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>

для моего здравомыслия я написал полифилл, чтобы просто добавить 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>

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

body {
  min-width: 450px;
}

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

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

    Ничего не найдено.

Добавить ответ:
Отменить.