Библиотека Device.js или о мобильных дизайнах

Поделиться1Чт, 3 Янв 2019 22:53:34

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5808
Позитив: +6437
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 13:30:41

Тему можно в корзину.

Вообщем нашел интересную статью: https://danilin.biz/device-js.htm Можно подключить скрипт, который будет в зависимости от устройства задавать классы тегу html:

Что дает большие возможности делать мобильные дизайны, при чем и на уровне для планшетов отдельно, и даже айфон-андроид отдельно.. Возможность гораздо более интересная, чем прыгать от размеров экрана.. Но как всегда есть но:

1. Все бы хорошо, и для мобильного дизайна для всех селекторов добавляем html.mobile и будет работать на все мобильные устройствах (для планшетов: html.tablet), но будет мешаться родной дизайн - нужен способ его отключения для универсализации.. Для себя родного можно в родном дизе везде добавить: html.desktop и тогда он мешать не будет и таким образом уже будет действительно разделено какой диз для какого устройства..

2. Это скрипты и стили в НТМЛ верху и НТМЛ низу, которые не нужны для мобильного дизайна.. В идеале было бы если б был бы отдельно контейнер для ПК и для мобильных девайсов..

3. В идеале - это чтобы скрипт был подключен для всего сервиса в head..

Кому интересно моя проба на основе дизайна и мобильного дизайна техподдержки (я подобавлял html.mobile, чтобы посмотреть как это работает. Отключать мобильный стиль в настройках обязательно):
Код:
<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/000d/8d/19/25201.css">
<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/000d/8d/19/44482.css">
<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/000d/8d/19/54270.css">
<script src="https://unpkg.com/current-device/umd/current-device.min.js"></script>
Более подробно о библиотеке на странице разработки: https://github.com/matthewhudson/current-device

Отредактировано kolobdur74 (Сб, 8 Авг 2020 20:26:33)

+3

Поделиться2Пт, 4 Янв 2019 00:46:33

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11571
Последний визит:
Вчера 23:36:59

kolobdur74 написал(а):

. Для себя родного можно в родном дизе везде добавить: html.desktop

По идее, как вариант, - десктопный диз(чтобы не добавлять много к каждому html.desktop можно обернуть весь (дважды) в первом и втором окне через максимальную ширину экрана (она больше чем на мобильных и не менее 1024px) /

/* A1.1 */
@import url(style_cs.css);
@media screen and (max-width: 900px) {

/* A2.1 */
html, body {margin: 0; padding: 0}

/* A2.2 */
.punbb * {
margin: 0
}

/* A2.3 */
.punbb ul, .punbb dl, .punbb li, .punbb dd, .punbb dt {
padding: 0;
list-style: none;
}
Ну тут далее остальные правила..

}

Ваще нун поизучать тег @media (там возможно есть более интересные варианты

Отредактировано Deff (Пт, 4 Янв 2019 00:55:23)

0

Поделиться3Пт, 4 Янв 2019 01:09:44

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5808
Позитив: +6437
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 13:30:41

Deff написал(а):

По идее, как вариант, - десктопный диз(чтобы не добавлять много к каждому html.desktop можно обернуть весь (дважды) в первом и втором окне через максимальную ширину экрана (она больше чем на мобильных и не менее 1024px) /

Ну, это надо пробовать - пока для смартфонов край по узкой стороне: 1440 (то бишь 720), но уже в повернутом варианте 2960 (1480) - для планшетов это совсем актуально.. Так что уже есть затыки по ширине экрана, с учетом моды на 2К экраны.. Кстати, @media имеет меньший приоритет, чем обычный селектор не обернутый - это стоит учитывать..

0

Поделиться4Пт, 4 Янв 2019 01:15:34

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11571
Последний визит:
Вчера 23:36:59

kolobdur74
Ну мож по высоте ? ( Ну и про @media я сказал нужно поизучать ( видел на хабре как-то через него и другим макаром мобильные селектируются

0

Поделиться5Пт, 4 Янв 2019 01:18:01

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11571
Последний визит:
Вчера 23:36:59

kolobdur74 написал(а):

, @media имеет меньший приоритет, чем обычный селектор не обернутый - это стоит учитывать..

Хм, вот тут я не уверен, ибо борьба со сменой правил при подключении мобильного стиля от сервиса (а он через @media - требует оч длинных селекторов и !important

0

Поделиться6Пт, 4 Янв 2019 01:33:00

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5808
Позитив: +6437
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 13:30:41

Deff написал(а):

Ну мож по высоте ? ( Ну и про @media я сказал нужно поизучать ( видел на хабре как-то через него и другим макаром мобильные селектируются

Ну, пока разрыв еще есть, бо как мониторов с разрешением меньше 1480 стало очень мало.. Было и не только на хабре, только насколько я помню, там затык в том, что касается конкретных устройств, и оно устарело, вообще @media сильно подустарел и его поддержкой под нынешние времена не занимаются..

Deff написал(а):

Хм, вот тут я не уверен, ибо борьба со сменой правил при подключении мобильного стиля от сервиса (а он через @media - требует оч длинных селекторов и !important

Именно - если без @media сервисные коды можно перебить, то с @media это будет уже сложнее.. Вообще очень много !important и от сервиса и в последних стандартных дизах.. Как раз когда ради посмотреть как работает скрипт взял стиль с техподдержки столкнулся с множеством !important.. Кстати, во многом данный скрипт позволяет убрать !important так как срабатывать должен на тот или иной класс.. Но если ставить его из НТМЛ верха, то задержки могут быть, почему и желательно его ставить на уровне head, а еще лучше чтобы это было на уровне php))) Но это по ходу совсем не реал нынче))) Поэтому в принципе мой первый пост полезен, на данный момент, исключительно для админов с знаниями, и которые хотят сделать по взрослому для мобильных устройств.. И все равно будут мешать НТМЛ верх и НТМЛ низ..

Отредактировано kolobdur74 (Пт, 4 Янв 2019 01:34:44)

+1

Поделиться7Пт, 4 Янв 2019 01:37:23

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11571
Последний визит:
Вчера 23:36:59

kolobdur74, да в принципе я не прочь и использовать и html.desktop в стандартном добавку, тут мысля была как упростить юзеру возможность использования...
Наверно можно родить скрипт - вставляешь код стиля в некую форму - оно автодобавляет ко всем селекторам...

+1

Поделиться8Пт, 4 Янв 2019 01:47:10

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5808
Позитив: +6437
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 13:30:41

Deff написал(а):

да в принципе я не прочь и использовать и html.desktop в стандартном добавку, тут мысля была как упростить юзеру возможность использования...
Наверно можно родить скрипт - вставляешь код стиля в некую форму - оно автодобавляет ко всем селекторам...

Тут вишь в чем фишка, что надо же не ко всем селекторам, как пример:

html.mobile .punbb:not(#pun-redirect):not(#pun-viewforum):not(#pun-searchtopics) .main h1, html.mobile #pun-debug h2

Если привязать добавку к после запятой, то в начале не будет, а если в начале, то к чему привязывать? К решетке и к точке не привязать - эт я хотел себе облегчить жизнь через Notepad++ - ничего не вышло, пришлось вручную добавлять)) Поэтому самое простое, если это возможно это вообще отключать:

<link rel="stylesheet" type="text/css" href="http://forumfiles.ru/style/Community_Blue/Community_Blue.css">

при условии появления html.mobile и html.tablet.. Вариант конечно тоже так себе, так как наверняка мелькания диза и задержка будет, но зато уже попахивает универсализацией.. Если же фокус с добавкой html.desktop выйдет, то вообще было бы прикольно :cool:

+1

Поделиться9Пт, 4 Янв 2019 01:54:10

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11571
Последний визит:
Вчера 23:36:59

kolobdur74 написал(а):

при условии появления html.mobile и html.tablet.. Вариант конечно тоже так себе, так как наверняка мелькания диза и задержка будет, но зато уже попахивает универсализацией.. Если же фокус с добавкой html.desktop выйдет, то вообще было бы прикольно

Я думаю можно избежать миганий не на русфф ( ибо скрипт переключения стилей в HTML верх работал на майб без миганий, а там шла вообще замена <link
На русфф - скрипты перед HTML верх занимают примерно секунду браузера (там мигать будет)

Отредактировано Deff (Пт, 4 Янв 2019 01:56:01)

+1

Поделиться10Пт, 4 Янв 2019 02:00:31

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11571
Последний визит:
Вчера 23:36:59

.punbb:not(#pun-redirect):not(#pun-viewforum):not(#pun-searchtopics) .main h1, html.mobile #pun-debug h2
Перед селектором, перед которым запятая и перед любым тегом, который идёт первым после {тут что-то}

Отредактировано Deff (Пт, 4 Янв 2019 02:00:56)

0

Поделиться11Пт, 4 Янв 2019 02:00:49

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5808
Позитив: +6437
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 13:30:41

Deff написал(а):

Я думаю можно избежать миганий не на русфф ( ибо скрипт переключения стилей работал на майб без миганий, а там шла вообще замена <link
На русфф - скрипты перед HTML верх занимают примерно секунду браузера (там мигать будет)

В принципе здесь фактически тоже самое - замена на другой диз, только автоматом при условии появления новых классов.. Я в самом скрипте device.min.js не уверен - на него Хром срабатывает в инструментах веб разработчика не очень хорошо, правда на смартфоне вроде нормально..

0

Поделиться12Пт, 4 Янв 2019 04:36:54

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11571
Последний визит:
Вчера 23:36:59

kolobdur74

Скриншот: http://s9.uplds.ru/SWG0F.jpg

Чо нидь такое вставь на Свою страницу

Код:

<!-- Добавка к стилю своего преселектора! -->
<textarea placeholder="Вставьте свой исходный код-CSS" id="code-css" rows="13"></textarea>
<input type="button" value="Преобразовать" onclick="transform()">
<textarea placeholder="Тут будет результат" id=out rows="13"></textarea>
<script type="text/javascript">
 
var add = "html.desktop "; //Нужная Добавка
 
function transform() {
    var str = $('#code-css').val();
    //alert(str)
    function repla(str, p1, p2) {
        p2 = p2.replace(/(^\s*|,\s*)([^,]*)(?=,|$)/gim, function(str2, pp1, pp2) {//alert([p2+'\n\n'+pp2])
            if ($.trim(pp2) !== 'html') {
                pp2 = add + pp2;
            }
            return pp1 + pp2;
        });
        return p1 + p2;
    }
    str = str.replace(/(\*\/|\})((?:[^\{\}](?!\*\/|\/\*))*?)(?=\{)/gim, repla);
    $('#out').val(str);
}
 
</script>

Поправил!
К тегу HTML пока добавляет криво ( лень было ещё к нему спец. регулярку делать) Ваще вот тут всё есть => https://javascript.ru/basic/regular-expression (Если интересно, без регулярок в js, как без рук

Отредактировано Deff (Пт, 4 Янв 2019 15:02:29)

+1

Поделиться13Пт, 4 Янв 2019 12:59:20

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5808
Позитив: +6437
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 13:30:41

Deff, есть глюк:

/* CS1 Background and text colours
-------------------------------------------------------------*/
html,bhtml.desktop ody {
background: url(http://forumfiles.ru/img/Mybb_iPhone/bg.gif) #343434 repeat-x top;
}

Я так понимаю, это если запятая вплотную стоит..

И здесь та же история:

html.desktop #pun-stats h2, html.desktop .punbb .main h1,.html.desktop punbb .main h2, html.desktop #pun-debug h2

Кстати, выявился недостаток без вставки в head соответственно слетает стиль админки..

Отредактировано kolobdur74 (Пт, 4 Янв 2019 13:09:27)

+1

Поделиться14Пт, 4 Янв 2019 14:33:25

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11571
Последний визит:
Вчера 23:36:59

kolobdur74 написал(а):

Кстати, выявился недостаток без вставки в head соответственно слетает стиль админки..

Ну в Админке можно убрать Ваще эту добавку, ибо с мобилки в Админку нефиг суваться

0

Поделиться15Пт, 4 Янв 2019 14:44:14

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5808
Позитив: +6437
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 13:30:41

Deff написал(а):

Ну в Админке можно убрать Ваще эту добавку, ибо с мобилки в Админку нефиг суваться

Ну, стиль то переделываем - либо меняем весь стиль и админка будет без стиля, либо надо редактировать стиль так, чтобы админку это не коснулось, что возвращает к вопросу об универсализации..

0

Поделиться16Пт, 4 Янв 2019 14:45:28

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11571
Последний визит:
Вчера 23:36:59

Увидел ... ща поправлю

+1

Поделиться17Пт, 4 Янв 2019 14:45:48

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5808
Позитив: +6437
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 13:30:41

Deff написал(а):

Увидел ... ща поправлю

Ага))

Отредактировано kolobdur74 (Пт, 4 Янв 2019 14:52:22)

0

Поделиться18Пт, 4 Янв 2019 15:00:33

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11571
Последний визит:
Вчера 23:36:59

Deff написал(а):

Поправил!

Отредактировано Deff (Пт, 4 Янв 2019 15:03:09)

+1

Поделиться19Пт, 4 Янв 2019 15:09:36

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11571
Последний визит:
Вчера 23:36:59

kolobdur74 написал(а):

Deff написал(а):
Ну в Админке можно убрать Ваще эту добавку, ибо с мобилки в Админку нефиг суваться
Ну, стиль то переделываем - либо меняем весь стиль и админка будет без стиля, либо надо редактировать стиль так, чтобы админку это не коснулось, что возвращает к вопросу об универсализации..

У Админки свой селектор,
2-е Давно витает идея разложить стиль по страницам: Главная, Форум с темами, Топик, Профиль, страница поисков, Админку вынести и делать ток под десктоп ( ибо править с мобилки в Админке, нун отшибать руки, ибо не вдумчиво - на коленках, куча ошибок, есть ещё спец глюки копирования-вставки с мобилки в теxarea *Опытные Админы давно туда с мобилок не лазят!
Можно кнешн повыпендривацо... но многолетний опыт (да и тут есть на ЕТП описание помощи при правках в Админке с мобил

Отредактировано Deff (Пт, 4 Янв 2019 15:12:35)

0

Поделиться20Пт, 4 Янв 2019 15:23:45

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5808
Позитив: +6437
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 13:30:41

Deff написал(а):

У Админки свой селектор,

В стандартных стилях частое явление использовать общий селектор, а не конкретно админки, как пример:

#pun-ulinks .container {
background: url(../../img/Mybb_iPhone/alt0.gif) repeat-x #C7C7C7 bottom;
}

Стиль Mybb iPhone При чем большая часть админки использует именно общие селекторы, а не админские..

Deff написал(а):

2-е Давно витает идея разложить стиль по страницам: Главная, Форум с темами, Топик, Профиль, страница поисков, Админку вынести и делать ток под десктоп ( ибо править с мобилки в Админке, нун отшибать руки, ибо не вдумчиво - на коленках, куча ошибок, есть ещё спец глюки копирования-вставки с мобилки в теxarea *Опытные Админы давно туда с мобилок не лазят!

Для Админки согласен, а вот по страницам - плохая идея, чревато увеличением кода в разы.. И так раздувают код пользователи до фига, и так по сути он двоится часто в стандартных стилях, пример:

/* A2.1 */
html, body {margin: 0; padding: 0}

html,body {
background: url(../../img/Mybb_iPhone/bg.gif) #343434 repeat-x top;
}

/* A5.1 */
#pun {
margin: 0px auto 30px auto;
width : 884px;
padding: 0px 21px 0px 21px;
border: none;
border-bottom: 3px #019AD9 solid;
}

#pun {
background: url(../../img/Mybb_iPhone/pun.jpg) #fff no-repeat top center;
color: #2B2B2B;
border-color: #26363d
}

И т.д. Это из того же стиля Mybb iPhone.. И такое почти во всех стилях.. Думаю, что Максим руководствовался при создании двух окон удобством пользователей, но мой опыт показывает, что два окна только путает пользователей.. Ну, и минус - увеличение кода в полтора раза.. Это сейчас, а если увеличить количество окон, то будет еще хуже.. А вот вынести админку - это хорошая идея.. Как нить, когда будет время, попробую сделать в новом своем стиле что-то подобное..

+1

Единый форум поддержки

Меню навигации

Пользовательские ссылки

Информация о пользователе

Библиотека Device.js или о мобильных дизайнах

Сообщений 1 страница 20 из 24

Поделиться1Чт, 3 Янв 2019 22:53:34

Поделиться2Пт, 4 Янв 2019 00:46:33

Поделиться3Пт, 4 Янв 2019 01:09:44

Поделиться4Пт, 4 Янв 2019 01:15:34

Поделиться5Пт, 4 Янв 2019 01:18:01

Поделиться6Пт, 4 Янв 2019 01:33:00

Поделиться7Пт, 4 Янв 2019 01:37:23

Поделиться8Пт, 4 Янв 2019 01:47:10

Поделиться9Пт, 4 Янв 2019 01:54:10

Поделиться10Пт, 4 Янв 2019 02:00:31

Поделиться11Пт, 4 Янв 2019 02:00:49

Поделиться12Пт, 4 Янв 2019 04:36:54

Поделиться13Пт, 4 Янв 2019 12:59:20

Поделиться14Пт, 4 Янв 2019 14:33:25

Поделиться15Пт, 4 Янв 2019 14:44:14

Поделиться16Пт, 4 Янв 2019 14:45:28

Поделиться17Пт, 4 Янв 2019 14:45:48

Поделиться18Пт, 4 Янв 2019 15:00:33

Поделиться19Пт, 4 Янв 2019 15:09:36

Поделиться20Пт, 4 Янв 2019 15:23:45