X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Media Queries и скроллбар
csoft
csoft
Topic Starter сообщение 30.8.2013, 1:41; Ответить: csoft
Сообщение #1


Всем привет!

Имеются макеты адаптивного дизайна. На некоторых из них элементы местами так близко расположены друг к друга, что это вызывает следующую проблему. Допустим, имеем макет под 480 пикселей. Верстаем, открываем в мобильных устройствах, всё ок. Открываем на обычном ПК - полоса прокрутки входит в значение width в Media Query, а так как всё рассчитано именно на минимум в 480 - вёрстка ломается.

Искал разные решения, надеялся, что тут можно обойтись как-то без извращений... Не нашёл ничего интересного. Было бы вообще круто, если бы можно было браузер заставить считать width без скролл-бара. Конечно, можно этот момент отслеживать через JS, и в зависимости от ситуации, например, уменьшить общий padding вокруг всей страницы, чтобы с учётом скролла войти в 480.

И второй, наверное, странный вариант... Составить выражение в таком стиле:

[CSS]@media only screen and (min-width: 500px), only screen and (min-device-width: 480px) and (max-device-width: 768px)[/CSS]

То есть, прибавляем сразу примерно 20 пикселей скролла к 480 - для ПК, а другие устройства подхватят вторую часть выражения. Проблема в том, что я совершенно не уверен в этом варианте решения проблемы. Прогнал по эмуляторам - вроде как работает нормально. Но вдруг на каких нестандартных разрешениях будут проблемы?

Кто имеет опыт решения подобной задачи - поделитесь, пожалуйста, своими мыслями! Впрочем, если не имеете такого опыта - тоже поделитесь :)

Спасибо!
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
RayOfLight
RayOfLight
сообщение 30.8.2013, 12:56; Ответить: RayOfLight
Сообщение #2


IE, Firefox и Opera включают ширину скроллбара во viewport, Chrome — нет, в Mac OS X ширина скроллбара включается, но не учитывается (источник). В общем, поведение разное, как и ширина скроллбара. Самый лучший вариант, конечно — сверстать так, чтобы не разваливалось, но и этот, в принципе, тоже сойдёт.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
csoft
csoft
Topic Starter сообщение 30.8.2013, 15:28; Ответить: csoft
Сообщение #3


(RayOfLight @ 30.8.2013, 15:56) *
Chrome — нет


Уже тоже включает.

(RayOfLight @ 30.8.2013, 15:56) *
Самый лучший вариант, конечно — сверстать так, чтобы не разваливалось


Ну да, само-собой.

(RayOfLight @ 30.8.2013, 15:56) *
но и этот, в принципе, тоже сойдёт


Вы про мой код выше?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
RayOfLight
RayOfLight
сообщение 30.8.2013, 15:43; Ответить: RayOfLight
Сообщение #4


Да, я думаю, это не будет критично.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
csoft
csoft
Topic Starter сообщение 30.8.2013, 15:45; Ответить: csoft
Сообщение #5


Спасибо за ответ!

Было бы здорово, если кто ещё напишет про свой опыт :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
csoft
csoft
Topic Starter сообщение 30.8.2013, 17:01; Ответить: csoft
Сообщение #6


(RayOfLight @ 30.8.2013, 18:43) *
Да, я думаю, это не будет критично.


Увы :( Для уверенности сделал сейчас демку подобного плана:

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<style>
body {
height: 2000px;
margin: 0;
padding: 0;
text-align: center;
}

.mw320,
.mw480,
.mw768,
.mw1000 {
display: none;
}

@media only screen and (min-width: 340px), only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.mw320 {
display: block;
background: #ccc;
}
}

@media only screen and (min-width: 500px), only screen and (min-device-width: 480px) and (max-device-width: 768px) {
.mw480 {
display: block;
background: #fcf;
}
}

@media only screen and (min-width: 788px), only screen and (min-device-width: 768px) and (max-device-width: 1000px) {
.mw768 {
display: block;
background: #ccc;
}
}

@media only screen and (min-width: 1020px), only screen and (min-device-width: 1000px) and (max-device-width: 1224px) {
.mw1000 {
display: block;
background: #fcf;
}
}
</style>
</head>
<body>
<div class="mw320">min-width = 320</div>
<div class="mw480">min-width = 480</div>
<div class="mw768">min-width = 768</div>
<div class="mw1000">min-width = 1000</div>
<script>
var viewportWidth = window.innerWidth || document.documentElement.offsetWidth;
var scrollbarWidth = viewportWidth - document.documentElement.clientWidth;
document.write('<hr />');
document.write('viewport width: <span id="viewport">' + viewportWidth + '</span>');
document.write('<br />');
document.write('scrollbar width: ' + scrollbarWidth);

window.onresize = function () {
document.getElementById('viewport').innerHTML = window.innerWidth || document.documentElement.offsetWidth;
};
</script>

</body>
</html>


Запускаю в iOS Emulator. iPhone - ok. iPad - ok. Поворачиваю что первый, что второй - min-device-width: 480px и min-device-width: 768px они уже не воспринимают :( Блиииин. Всё, вариант отпадает :(
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
RayOfLight
RayOfLight
сообщение 30.8.2013, 17:06; Ответить: RayOfLight
Сообщение #7


Ну да, потому что ориентация меняется на альбомную.
Есть ещё вот такой вариант: считать ширину скроллбара с помощью JavaScript, и уже делать из этого какие-то выводы (возможно, увеличивать/уменьшать ширину).
А можно посмотреть, что конкретно разваливается на странице из-за появляющегося скроллбара?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
csoft
csoft
Topic Starter сообщение 30.8.2013, 17:12; Ответить: csoft
Сообщение #8


(RayOfLight @ 30.8.2013, 20:06) *
Есть ещё вот такой вариант: считать ширину скроллбара с помощью JavaScript, и уже делать из этого какие-то выводы


Да, я себе подобного плана демку уже делал с неделю назад, как писал в первом посте. Общий padding уменьшал с обеих сторон. Но когда начинаешь в браузере менять размер окна - как-то выглядит это решение непрофессионально, что ли :(

(RayOfLight @ 30.8.2013, 20:06) *
А можно посмотреть, что конкретно разваливается на странице из-за появляющегося скроллбара?


Да дизайнер, зараза, нарисовал элементы почти впритык под разрешение 480 пикселей. Я сначала не подумал об этом, тем более, что сначала шапка версталась (эти элементы именно там) и скролла пока не было. Когда дело пошло дальше и он появился - я начал матюкаться :) А раздвинуть что-то - вообще нереально. И дизайнер в отпуск ушёл. Всё как всегда, блин :)

Короче, да. Правильнее - ждать дизайнера и просить переделать, чтобы вокруг элементов было пространство с запасом пикселей в 20 под этот самый скролл. Лучше ничего тут не сделать. Жаль, что в @media нельзя ничего такого дописать, чтобы он скролл не учитывал в ширину.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
RayOfLight
RayOfLight
сообщение 30.8.2013, 17:33; Ответить: RayOfLight
Сообщение #9


Вообще, в том источнике в конце есть пример @media-запроса:
[CSS]@media only screen and (max-width:768px) and (vertical-scrollbar:[inside|outside|on-top]) {
/* … */
}[/CSS]Но опять же всё зависит от ширины скроллбара, да и насчёт поддержки браузерами я не уверен.

Ещё сейчас пришло в голову, что можно с помощью CSS всегда показывать горизонтальный скролл:
[CSS]body { overflow-y: scroll; }[/CSS]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
csoft
csoft
Topic Starter сообщение 30.8.2013, 17:40; Ответить: csoft
Сообщение #10


(RayOfLight @ 30.8.2013, 20:33) *
vertical-scrollbar:[inside|outside|on-top]


Я тоже видел такое в другой статье несколько дней назад, когда искал, но это, как я понял, была выдумка автора. Типа, вот если бы была возможна такая запись - частично проблема бы решилась. Я её даже пробовал, но она ничего не даёт. Медиа-запрос с ней вообще игнорируется.

(RayOfLight @ 30.8.2013, 20:33) *
Ещё сейчас пришло в голову, что можно с помощью CSS всегда показывать горизонтальный скролл


Мобильные устройства всё равно скрывают скролл и во viewport его не включают. Опять же сейчас проверил на всякий случай демкой выше в эмуляторах.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Раскройте свой потенциал заработка с помощью 2x2 Media Network — вашего пути к выгодным предложениям CPA!
Присоединяйтесь к 2x2 Media Network, вашему надежному партнеру в мире
9 2x2MediaLimited 2793 20.3.2024, 4:33
автор: 2x2MediaLimited
Открытая тема (нет новых ответов) eJex.club - работаем с email, SEO, push, SMS, social media, ASO и другими источниками трафика
1 eJex_Affiliate 1290 25.4.2023, 14:24
автор: eJex_Affiliate
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыLambushka.media - лучшие CPA офферы
0 lambushka_media 1117 3.12.2020, 17:55
автор: lambushka_media
Открытая тема (нет новых ответов) Nutra.Media – свежие нутра офферы без посредников
0 Wildo 1426 16.10.2019, 12:51
автор: Wildo
Открытая тема (нет новых ответов) Adplayer.Media - монетизация видеоконтента в Ру и Бурже: 10+ форматов рекламы
3 kuprum 1605 7.7.2018, 9:44
автор: -kuprum-


 



RSS Текстовая версия Сейчас: 28.3.2024, 12:28
Дизайн