Адаптивный дизайн — как задать ширину окна мобильного браузера больше, чем разрешение экрана девайса?

Question

[Дмитрий]

Нужна помощь. На сайте используется адаптивный дизайн. Подскажите пожалуйста как сделать так, чтобы на мобильных устройствах, окно мобильного браузера не сужалось менее чем на 650px по ширине, то есть на мобильных устройствах с разрешением менее 650px по ширине, браузер показывал сайт в разрешении не менее чем в 650px. При разрешении менее 650px контент сайта отображается не корректно.

Answer 1

[Ivanq]

Это невозможно. Браузер просто не может показывать контент больше, чем может вместить экран. Как вариант - задавать значения для размеров меньше 650px в процентах

P.S. <meta name=viewport content="width=650">

Comments

[Дмитрий]

Может я не правильно выразился, например на ipod touch 4g разрешение в мобильном браузере 480px по ширине, сайт перестраивается в зависимости от разрешения и контент отображается не корректно. При разрешение окна браузера в 650px по ширине, всё хорошо. Как зафиксировать эту ширину, чтобы на мобильных устройствах, окно браузера не сужалось меньше чем на 650px.

[Ivanq]

Дмитрий: А... Ну, это, на сколько я знаю, никак.

[Дмитрий]

Ivanq: меня один человек направил вот сюда: https://developers.google.com/speed/docs/insights/...
Но я так и не разобрался, как это может решить мой вопрос

[Ivanq]

Дмитрий: добавьте

[Дмитрий]

Ivanq: что добавить?

[Ivanq]

Дмитрий: коммент стерся. <meta name=viewport content="width=650, initial-scale=1">

[Дмитрий]

Ivanq: Вы мой спаситель :)
Работает, только initial-scale=1 лишнее, так как получается увеличение и полоса прокрутки в низу браузера, решение

[Ivanq]

Дмитрий: отметьте как решение, я изменю вопрос

[Дмитрий]

Ivanq: готово

[Дмитрий]

Мне кажется это решает мою проблему на половину, width=650 устанавливается для всех мобильных устройств, то есть если разрешение экрана больше 650px, то всё равно контент будет в 650px, сейчас проверить не могу, но я почти уверен что так. На данный момент я так понимаю нет решения задать не конкретно 650px, а минимум 650px.

[Ivanq]

Дмитрий: можно через JS:
stackoverflow.com/questions/15040408/achieving-min... первый ответ

[Дмитрий]

Ivanq: я так понимаю там viewport динамически может изменяться, только принцип работы я не понял

[Дмитрий]

в php я не силён

[Ivanq]

Дмитрий:

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

[Ivanq]

Дмитрий: какой PHP? это JS

[Дмитрий]

Ivanq: ну да JS, что то я совсем уже запутался, meta размещаю между тегами , скрипт на всех страницах сайта, правильно? Значение content="width = 380" в принципе можно ставить любое до 650, всё равно его скрипт меняет?

[Ivanq]

Дмитрий: нет, значение если разрешение больше 650 не меняется. я вам код не совсем тот дал:

<meta id="myViewport" name="viewport" content="width = 380">
<script>
window.addEventListener("load", function() {
    if(window.innerWidth < 650) {
        var mvp = document.getElementById('myViewport');
        mvp.setAttribute('content','width=650');
    } else {
        mvp.parentNode.removeChild(mvp);
    }
});
</script>

А значение любое.

[Дмитрий]

Ivanq: спасибо, буду пробовать.
Ещё я пробовал через медиа запрос: media screen and (min-width: 650px) {
@viewport { width: 650px; }
}
Брал инфу от сюда: www.webmolot.com/viewport
Но почему то не работает.

[Ivanq]

Дмитрий: конечно. @viewport - это немного другое. его нельзя менять, можно только менять в зависимости от его свойств другие элементы.

[Дмитрий]

Ivanq: спасибо, буду пробовать скрипт

Answer 2

[Kot Matpockuh]

1) html, body min-width?
2) viewport: https://developer.mozilla.org/ru/docs/Web/CSS/@viewport

upd1:
css:

body{
  min-width: 650px;
}

в .html в "бошке" добавить метатег viewport с контентом width=650

либо сделать проверку ширины так:

<meta name="viewport" content="width=device-width" id="viewportVal">

затем:

<script>
        window.onload = function () {
            if(screen.width <= 650) {
                var vp = document.getElementById('viewportVal');
                vp.setAttribute('content','width=650');
            }
        }
    </script>

Comments

[Дмитрий]

А можно пример как это применить в моём случае.

[Kot Matpockuh]

Дмитрий: смотрите upd1

[Дмитрий]

Kot Matpockuh: спасибо
1 вариант работает, там достаточно добавить , но дело в том, что width=650 будет действовать для всех мобильных устройств, даже если у них разрешение экрана более 650px.
2 вариант работает, но как то с небольшой задержкой, скорее всего потому что код скрипта в конце устанавливаю.
2 вариант 100% решение, вот бы его оптимизировать ещё, или найти вариант без использования скрипта.

[Kot Matpockuh]

о) меня Ivanq опередил... чёт даж не обратил внимания, зря коммент писал(

[Дмитрий]

Kot Matpockuh: всё равно спасибо, вот бы решение без использования скрипта найти.
Куда я только не писал о своей проблеме, и только тут мне помогли!

[Kot Matpockuh]

на stackoverflow.com тоже тихо на счёт этой проблемы?

[Дмитрий]

Kot Matpockuh: уже и не упомню куда писал, ни где не могут найти решения, или просто молчат, или просто посылают смотреть viewport

[Дмитрий]

На такую ещё статью наткнулся, но это не работает: www.webmolot.com/viewport

Answer 3

[Механик]

Можно проще. В данном случае вьюпорт так и останется мобильным, а вот контент будет шириной в 650px и будет скроллиться. На мой взгляд, это самое удобное решение для корректного отображения немасштабируемых/неадаптивных блоков контента на мобильных устройствах.

@media (max-width:650px){
html{
width: 100%;
height: 100%;
overflow-x: hidden;
}
body{
min-width:650px;
overflow:auto;
}
}