Как добиться нужного результата — css и bootstrap?

Question

[poimanoo]

Здравствуйте. Прошу помочь разобраться с бутстрапом.
Есть index.html а в нем картинка(логотип), заголовок и пару инпутов. При просмотре через мобильную версию размеры картинки(логотипа), заголовка и инпутов остаются теми же, что и для обычного монитора(большие).
Есть style.css. Если в нем явно задаю .container { width:600px; } (без media и прочей приблуды), то теперь при просмотре через мобильную версию и картинка(логотип) и заголовок и инпуты уменьшаются пропорционально - именно то что мне нужно!
Но проблема заключается в том, что если открыть страницу через мобильное устройство, то страница открывается не вмещенная в экран, а как будто ее приблизили, и чтобы она вся вместилась в экран нужно движением пальцев как бы отдалить зуммированную версию. Подскажите пожалуйста, как можно сделать так, чтобы экран уже изначально открывался нормальным(вмещенным полностью), а не так, будто его кто-то приблизил? Спасибо.

Answer 1

[kreoTech]

Задать viewport в head секции index.html:

<meta name="viewport" content="width=device-width, initial-scale=1">

Comments

[poimanoo]

Изначально было задано

[kreoTech]

poimanoo, тогда исправить таким образом:

<meta name="viewport" content="width=600, initial-scale=1">

[poimanoo]

kreoTech, к сожалению, не помогло - снова открылось так же увеличено

[poimanoo]

kreoTech, может это как-то связано с тем, что у меня для body ничего не прописано в стилях?

Answer 2

[TheRevan]

html,body{overflow:hidden}, но то что вы называете медиа выражения "лабудой" оставляет желать удачи и мой вам совет - не идите в веб

Comments

[poimanoo]

"мой вам совет - не идите в веб" - обещаю)

Я применил то что Вы написали и к сожалению теперь пропорциональное уменьшение содержимого вообще перестало работать при уменьшении области видимости браузера - то есть просто стал появляться скролл как в ширину так и в высоту

[TheRevan]

poimanoo, скиньте ссылку на страницу, либо залейте код на codepen, тогда смогу поправить и сообщить в чем проблема

[poimanoo]

TheRevan, вот ссылка https://codepen.io/anon/pen/xYJLbw

Answer 3

[koanvl]

Глядя на ваш код, можно сделать вывод, что вы не совсем понимаете, по какому принципу работает сетка Bootstrap. Вам нужен адаптив или пропорциональное уменьшение страницы? Если пропорциональное уменьшение страницы, то вам нужно жестко зафиксировать ширину контейнера Bootstrap (через important) и всем колонкам присвоить только col-xs-...(что у вас там ). Но есть в этом нюанс, что оно будет все такое мелкое и не юзабельное на мобильных утройствах, т.к. это не адаптив. Да и смысл тогда юзать бут? С таким же успехом можно сделать верстку фиксированную и не париться.
Если вы хотите именно адаптив или респонсив, то необходимо вникнуть в принцип работы сетки Bootstrap и дополнительно контролировать все медиа-запросами.

Comments

[poimanoo]

Я думал, что бутстрап как раз и решает задачу пропорционального уменьшения содержимого страницы в зависимости от размера экрана устройства, поэтому его использовал) Просто в данный момент через мобильное устройство все выглядит именно так как я бы хотел - не мелко и неюзабельно, как могло бы быть, а все достаточно комфортно(на мой взгляд). И единственная деталь, которая смущает, это эффект увеличенного экрана при первом открытии через телефон. Поэтому и попросил помощи с решением данной проблемы.
Спасибо за ответ, попробую поколдовать с important и col-xs

[koanvl]

Bootstrap не уменьшает, он, в частности, выстраивает содержимое под каждое устройство в зависимости от того, как это прописал разработчик. Пропорционально и без спроса уменьшаются там только изображения. А, если у вас кнопка 40 пикселей на 200 пикселей, то она не будет по итогу 20 пикселей на 100 пикселей.
И не влезает у вас в экран банально потому, что вы зафиксировали ширину контейнера 600 пикселей. А как он влезет, если вьюпорт, к примеру 480 пикселей? Вот у вас условные 120 пикселей и болтаются справа при малых разрешениях экрана.

[poimanoo]

koanvl, то есть мне никак не решить эту проблему, оставив ширину контейнера 600px? Во viewport я пробовал задавать самую разную ширину - не помогло. Разрешение на телефоне через который проверяю full hd. В любом случае, благодарю за попытки помочь)

[koanvl]

Учите бутстрап, учитесь перестраивать местоположение контента согласно размеров экрана. Проблема не только в ширине контейнера. Банально у вас инпут с телефоном вылезет за рамки контейнера и все равно будет горизонтальный скролл на мобильном. У вас, пока не появится понимание того, чем col-lg-4 отличается от col-sm-8 будут лезть какие-то косяки.

[poimanoo]

koanvl, благодарю за советы!