Помощник
|
Media Queries и скроллбар |
csoft
|
Сообщение
#1
|
||
|
|
||
|
|||
RayOfLight |
30.8.2013, 12:56;
Ответить: RayOfLight
Сообщение
#2
|
|
IE, Firefox и Opera включают ширину скроллбара во viewport, Chrome — нет, в Mac OS X ширина скроллбара включается, но не учитывается (источник). В общем, поведение разное, как и ширина скроллбара. Самый лучший вариант, конечно — сверстать так, чтобы не разваливалось, но и этот, в принципе, тоже сойдёт.
|
|
|
csoft
|
Сообщение
#3
|
|
|
|
|
RayOfLight |
30.8.2013, 15:43;
Ответить: RayOfLight
Сообщение
#4
|
|
Да, я думаю, это не будет критично.
|
|
|
csoft
|
Сообщение
#5
|
|
Спасибо за ответ!
Было бы здорово, если кто ещё напишет про свой опыт :) |
|
|
csoft
|
Сообщение
#6
|
|
Да, я думаю, это не будет критично. Увы :( Для уверенности сделал сейчас демку подобного плана: <!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 |
30.8.2013, 17:06;
Ответить: RayOfLight
Сообщение
#7
|
|
Ну да, потому что ориентация меняется на альбомную.
Есть ещё вот такой вариант: считать ширину скроллбара с помощью JavaScript, и уже делать из этого какие-то выводы (возможно, увеличивать/уменьшать ширину). А можно посмотреть, что конкретно разваливается на странице из-за появляющегося скроллбара? |
|
|
csoft
|
Сообщение
#8
|
|
Есть ещё вот такой вариант: считать ширину скроллбара с помощью JavaScript, и уже делать из этого какие-то выводы Да, я себе подобного плана демку уже делал с неделю назад, как писал в первом посте. Общий padding уменьшал с обеих сторон. Но когда начинаешь в браузере менять размер окна - как-то выглядит это решение непрофессионально, что ли :( А можно посмотреть, что конкретно разваливается на странице из-за появляющегося скроллбара? Да дизайнер, зараза, нарисовал элементы почти впритык под разрешение 480 пикселей. Я сначала не подумал об этом, тем более, что сначала шапка версталась (эти элементы именно там) и скролла пока не было. Когда дело пошло дальше и он появился - я начал матюкаться :) А раздвинуть что-то - вообще нереально. И дизайнер в отпуск ушёл. Всё как всегда, блин :) Короче, да. Правильнее - ждать дизайнера и просить переделать, чтобы вокруг элементов было пространство с запасом пикселей в 20 под этот самый скролл. Лучше ничего тут не сделать. Жаль, что в @media нельзя ничего такого дописать, чтобы он скролл не учитывал в ширину. |
|
|
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
|
Сообщение
#10
|
|
vertical-scrollbar:[inside|outside|on-top] Я тоже видел такое в другой статье несколько дней назад, когда искал, но это, как я понял, была выдумка автора. Типа, вот если бы была возможна такая запись - частично проблема бы решилась. Я её даже пробовал, но она ничего не даёт. Медиа-запрос с ней вообще игнорируется. Ещё сейчас пришло в голову, что можно с помощью CSS всегда показывать горизонтальный скролл Мобильные устройства всё равно скрывают скролл и во viewport его не включают. Опять же сейчас проверил на всякий случай демкой выше в эмуляторах. |
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Раскройте свой потенциал заработка с помощью 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- |
Текстовая версия | Сейчас: 28.3.2024, 12:28 |