Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.03.2015, 19:42
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Ширина вьюпорта мобил и ширина туловища
В теге body стоит max-width:1280px, верстка резиново-складчатая и в любом браузере на десктопе все нормально складывается и где надо сжимается вплоть до 200 пикс, ну, нормально - 400 пикс по ширине. То есть без медиа-кверей все элементы интерфейса, тексты, картинки и тп - остается внутри окна.

Я думал что окно и вьюпорт - эквпипенисуальные технические понятия. Тем не менее в ФФ и Опере проверял в эмуляции мобил и видел что все как предусмотрено и складываетс-сжимается.

Однако на реальной мобиле, в частности на самсуне-планшете, не знаю сколько там ширина в портрете, но явно не 1280, браузеры тупо масштабируют сайт по контенту, загоняют его в вьюпорт и затем можно только оптически увеличивать двумя пальцами.

Почему так происходит? И второй вопрос. Это какие должны быть медиа-квери, чтобы на любой размер вьюпорта мне свернули страницу по его ширине? Потому что мне не нужен никакой шаг и шаги.

Вот задача: сколько пикселов ширина экрана мобилы - столько пикселов и сделай ширину body, но не больше 1280.

Как это реализовать? Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 26.03.2015, 19:46
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

<meta name="viewport" content="width=device-width, initial-scale=1" />
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 27.03.2015, 06:07
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Спасибо! Попробую.
Ответить с цитированием
  #4 (permalink)  
Старый 27.03.2015, 06:24
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Работает.

Но теперь в стандартном браузере фотки которые рендерятся по размеру меньше чем есть, средствами css (width:100% и получается скажем 752 пикс, а фотка 800 пикс), оказались невероятно растянуты по высоте. В Хроме в мобильном все ок, а стандартный браузер как марок нализался.
Ответить с цитированием
  #5 (permalink)  
Старый 27.03.2015, 06:28
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

И еще там баянчик, может подскажете или кто знает.

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

Коды показать? Или сайт? Там в кодах все, весь хтмл-цсс-жс - я так сделал, чтоб не линковать файлы. Но без дебьютифкатора не разберешься.
Ответить с цитированием
  #6 (permalink)  
Старый 27.03.2015, 08:18
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от kostyanet
оказались невероятно растянуты по высоте
Если у фотки прописан атрибут height то width менять нельзя.
Нужно отменять тогда и высоту через height: auto. И тогда скажи привет reflows. Веб-гавно, так оно и есть.
__________________
В личку только с интересными предложениями
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите с калькулятором piton1175 AJAX и COMET 0 16.06.2011 14:29