Мобильный дизайн "Приложение". Установка сложная.

Страница: « 1 2 3 4 »

Сообщений 21 страница 40 из 75

Поделиться1Пн, 28 Янв 2019 01:11:36

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

Это полноценный мобильный дизайн, но установка сложная. Дизайном в админке придется пожертвовать. На скриптах блоги и подфорумы данный дизайн не тестировался.

Установка:

Сначала установим мета тег Viewport: <meta name="viewport" content="width=device-width">:

Идем в Администрирование - Раскрутка и ставим в Имя: viewport, в Содержимое: width=device-width, должно получиться вот так:

Переводим Свой стиль в только для ПК (для тех у кого стоит стиль от сервиса надо предварительно его перенести в Свой стиль) Для этого идем в эту тему: Библиотека Device.js или о мобильных дизайнах - пост Деффа №12. Создаем свою страницу на своем форуме вставляем туда скрипт Деффа - открываем эту ново-созданную страницу, затем идем в Администрирование - Свой стиль - сначала из первого окна копируем всё содержимое - вставляем в ново-созданную страницу - преобразуем стиль, возвращаем в первое окно то, что получилось, затем производим ту же манипуляцию со вторым окном.

Скрипт, сам html не преобразует - его вручную заменяем на html.desktop

Далее в самый низ НТМЛ верха устанавливаем:

Код:

<!-- Общий мобильный стиль -->
<link rel="stylesheet" type="text/css" href="http://forumstatic.ru/files/000d/8d/19/77571.css">

<!-- Цветовая схема для мобильного стиля. Зеленый стиль -->
<link rel="stylesheet" type="text/css" href="http://forumstatic.ru/files/000d/8d/19/81991.css">

<!-- Скрипты для мобильного стиля -->
<script src="https://unpkg.com/current-device/umd/current-device.min.js"></script>
<script>
$( document ).ready(function() {

$('html.mobile .punbb').prepend('<div class="newheader"></div>');
$('html.mobile .newheader').append( $('#pun-title'),$('#pun-navlinks'),$('#pun-ulinks') );

$('html.mobile .newheader').prepend('<input type="checkbox" id="nav-toggle" hidden>','<input type="checkbox" id="nav-toggle2" hidden>','<label for="nav-toggle" class="nav-toggle mask-content" onclick></label>','<label for="nav-toggle2" class="nav-toggle2 mask-content2" onclick></label>');
$('html.mobile #pun-navlinks').prepend('<label for="nav-toggle" class="nav-toggle" onclick></label>', $('#pun-status'));
$('html.mobile #pun-ulinks').prepend('<label for="nav-toggle2" class="nav-toggle2" onclick></label>');


var g_top = 0;
  $(window).scroll(function() {
    var top = $(this).scrollTop();
    
    if ( top > g_top ) {
      $('.newheader').fadeOut(400);
    } else {
      $('.newheader').fadeIn(400);
    }
    
    g_top = top;    
  });

});
</script>

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

Посмотреть в работе мобильный дизайн можно здесь: http://digitalferrum.bbmy.ru/ (смотреть на мобильном устройстве или через инструменты веб-разработчика.

Скриншоты

При любых замечаниях по дизайну обязательно указываем на каком устройстве смотрели и в каком браузере.

Мобильный стиль от сервиса отключать ОБЯЗАТЕЛЬНО. Все свои стили, установленные в НТМЛ верху или где-то еще, переводим в стиль только для ПК по методу описанному выше для Своего стиля.

Свои варианты цветовой схемы только приветствуются - кто сделает выкладывайте для других пользователей.

Для тех, кто хочет облагородить Админку, в самый низ Первого окна Своего стиля добавить (ставить после изменений в основном стиле):

Стиль для Админки

Код:

/*************************************************************
ADMIN Style
**************************************************************/

.punbb-admin .acchide, .punbb-admin #pun-main h1, .punbb-admin #pun-navlinks h2, .punbb-admin #pun-pagelinks h2, .punbb-admin #pun-status h2, .punbb-admin #pun-ulinks h2, .punbb-admin .forum h2, .punbb-admin .multipage .topic h2, .punbb-admin dl.post-sig dt span, .punbb-admin p.crumbs strong, .punbb-admin .divider hr, .punbb-admin .required label em, .punbb-admin .formsubmit label, .punbb-admin .submitfield label, .punbb-admin .modmenu label, .punbb-admin #pun-userlist .main h2 {
    font-size: 0;
    height: 0;
    width: 0;
    line-height: 0.0;
    position: absolute;
    left: -9999px;
    overflow: hidden;
}

.punbb-admin h1, .punbb-admin h2, .punbb-admin h3 {
    font-size: 1em;
    font-weight: bold;
}

.punbb-admin h1, .punbb-admin h2 {
    border-right-style: none!important;
}

.punbb-admin ul, .punbb-admin dl, .punbb-admin li, .punbb-admin dd, .punbb-admin dt {
    padding: 0;
    list-style: none;
}

.punbb-admin {
    margin: 0px auto 30px auto;
    width: 100%;
    max-width: 1200px;
    min-width: 840px;
    padding: 0px 21px 0px 21px;
    border: none;
}

.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {
    color: #557fae;
    text-decoration: none;
    transition: opacity 0.3s ease, color 0.27s ease, background-color 0.27s ease, margin 0s linear, padding 0s linear;
}

.punbb-admin #pun-title {
    margin: 0;
    border: none;
    height: 98px;
    position: absolute;
    left: 0;
    right: 0 !important;
    top: 37px;
    z-index: 2;
    width: 100% !important;
}

.punbb-admin #pun-title {
    background: #5381b5;
    border-bottom: 1px solid #406895 !important;
}

.punbb-admin #pun-title TABLE {
    border: none;
    width: 100%;
    margin: 0 auto;
    max-width: 1210px;
    min-width: 840px;
}

.punbb-admin #pun-title TD.title-logo-tdl {
    border: none;
    width: 100%;
    padding-top: 46px;
}

.punbb-admin #pun-title h1 span {
    margin-left: 13px;
    font-size: 1.8em;
    font-variant: normal;
    font-weight: 400;
    font-family: Tahoma, Arial, Helvetica, Sans-Serif;
}

.punbb-admin #pun-title h1 {
    display: block;
    margin: -1px 0px 0px -1px;
}

.punbb-admin #pun-title h1 > span {
    color: #fff;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.6);
}

.punbb-admin #pun-navlinks {
    display: block;
    position: absolute;
    z-index: 9999;
    top: 55px;
    max-width: 1201px;
    min-width: 840px;
    width: 100%;
    margin: 0;
}

.punbb-admin #pun-navlinks .container {
    padding-top: 7px;
    padding-bottom: 10px;
    height: 16px;
    font-family: Sans-serif;
    font-size: 14px;
    max-width: 1201px;
    text-align: right;
}

.punbb-admin #pun-navlinks li {
    display: inline;
    font-size: 1em;
    margin: 5px;
}

.punbb-admin #pun-navlinks li a {
    color: #fff;
    text-shadow: 0 -1px 0 #385b83;
    padding: .5em 1em;
    margin: -.6em;
    text-decoration: none !important;
    -webkit-border-radius: 0.327em;
    border-radius: 0.327em;
}

.punbb-admin #pun-ulinks {
    margin: 0;
    background: #314f71;
    border-width: 0 0 1px 0;
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    min-width: 980px;
    z-index: 2;
}

.punbb-admin #pun-ulinks .container {
    border: 0;
    padding: 0.8em 1em;
    background: transparent;
    max-width: 1200px;
    text-align: center;
    margin: 0 auto;
}

.punbb-admin #pun-ulinks li, .punbb-admin #pun-ulinks li a {
    display: inline;
    border-left-style: none;
    border-left-width: 0px;
    white-space: nowrap;
    font-family: Sans-serif;
    text-decoration: none !important;
}

.punbb-admin #pun-ulinks a {
    color: #fff;
    padding: 11px;
}

.punbb-admin #pun-ulinks + div {
    margin-top: 145px;
}

.punbb-admin #pun-admain h2 {
    border-color: #5F95CC;
}

#pun-admain fieldset p {
    border-left-style: solid;
    border-left-width: 18em;
    margin-bottom: 3px;
    padding: 6px 0;
    position: relative;
    border-color: #dedfdf;
    background-color: #eee;
}

.punbb-admin #pun-admain .adcontainer {
    background-color: #ffffff;
    color: #333;
}

.punbb-admin .adcontainer {
    border-style: solid solid solid solid !important;
    border-width: 1px 1px 1px 1px !important;
    border-radius: 4px;
    border-color: #dfdfdf !important;
    margin-top: 3px !important;
}

#pun-adnav {
    float: left;
    width: 14em;
    margin-left: -15em;
    display: inline;
}

.punbb-admin #pun-admain h2 {
    background: #fff;
    color: #4A7EB3;
    border-bottom: solid 2px #5F95CC;
}

#pun-admain h1 span, #pun-admain h2 span, #pun-admain legend span, #pun-admain .adformal h3 span {
    font-size: 1.1em;
}

.punbb-admin #pun-crumbs1 {
    font-weight: bold;
    overflow: hidden;
    margin-top: 0;
}

.punbb-admin #pun-break1 {
    margin: 0 1em;
    border-style: solid none;
    border-width: 1px 0;
    height: 0;
    margin: -2px 1em;
    position: relative;
    z-index: 1;
}

.punbb-admin .divider {
    border-color: #eee #fff #fff #fff;
    margin-left: 5px !important;
    margin-right: 5px !important;
}

Скрипт переключатель между мобильным и десктопным вариантом дизайна для планшета от Алекса, ставить после скриптов мобильного дизайна:

Код:

<script>$('html.tablet').addClass('desktop'); //или mobile, если на планшете нужен мобильный</script>

Для Русфф рабочий вариант: Мобильный дизайн "Приложение". Установка сложная. пост №27

Отредактировано kolobdur74 (Вт, 12 Ноя 2019 18:11:34)

Поделиться21Сб, 2 Фев 2019 01:50:10

Автор: Alex_63
Администратор
Зарегистрирован: Чт, 11 Дек 2014
Сообщений: 10689
Уважение: +7178
Позитив: +5257
Пол: Мужской
Последний визит:
Вчера 19:52:34

kolobdur74
Не успел сегодня, на днях постараюсь глянуть

ВКонтакте alex__63

Поделиться22Сб, 2 Фев 2019 09:13:08

Автор: bektau
Заслуженный
Зарегистрирован: Вт, 15 Янв 2019
Сообщений: 231
Уважение: +76
Позитив: +220
Пол: Женский
Последний визит:
Вс, 14 Апр 2024 16:35:53

Зачем такой большой отступ слева?

Поделиться23Сб, 2 Фев 2019 12:19:39

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

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

Зачем такой большой отступ слева?

Можете сделать свой отступ, в основном стиле:

/* M_A4.4 */
html.mobile .main .tcr {
align-self: flex-start;
flex: 0 0 0.2vw;
padding-left: 20vw;
margin: 2vw 0 4vw 0;
}

Поделиться24Пт, 22 Фев 2019 14:13:42

Автор: bektau
Заслуженный
Зарегистрирован: Вт, 15 Янв 2019
Сообщений: 231
Уважение: +76
Позитив: +220
Пол: Женский
Последний визит:
Вс, 14 Апр 2024 16:35:53

......

Отредактировано bektau (Пт, 22 Фев 2019 14:33:02)

Поделиться25Сб, 16 Мар 2019 16:42:53

Автор: 96pi
Заслуженный
Зарегистрирован: Вс, 6 Янв 2013
Сообщений: 67
Уважение: +8
Позитив: +15
Пол: Женский
Предупреждения: 1: оскорбления пользователей 2: флейм ‡
Последний визит:
Пт, 5 Авг 2022 22:27:02

Блин. Это то, что мы искали год назад.
Ну, окей, лучше поздно, чем никогда)

Поделиться26Вс, 14 Июл 2019 01:55:02

Автор: Dimitriy Gerasimov
Заслуженный
Зарегистрирован: Вт, 3 Фев 2015
Сообщений: 270
Уважение: +117
Позитив: +82
Пол: Мужской
Последний визит:
Сб, 27 Ноя 2021 22:23:38

Отредактировано Android-Dim (Вс, 14 Июл 2019 01:57:01)

Поделиться27Пн, 5 Авг 2019 16:14:26

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

Только для Русфф:

Код:

<!-- Общий мобильный стиль -->
<link rel="stylesheet" type="text/css" href="http://forumstatic.ru/files/000d/8d/19/77571.css">
 
<!-- Цветовая схема для мобильного стиля. Зеленый стиль -->
<link rel="stylesheet" type="text/css" href="http://forumstatic.ru/files/000d/8d/19/81991.css">
 
<!-- Скрипты для мобильного стиля -->
<script>
require.config({
    "paths": {
      "device": "https://unpkg.com/current-device@0.8.2/umd/current-device.min"
    }
});

require(['device']);
</script>
<script src="https://unpkg.com/current-device/umd/current-device.min.js"></script>
<div class="newheader"></div>
<script>
$(document).ready(function() {
 
$('html.mobile .punbb').prepend($('.newheader'));
$('html.mobile .newheader').append( $('#pun-title'),$('#pun-navlinks'),$('#pun-ulinks') );
 
$('html.mobile .newheader').prepend('<input type="checkbox" id="nav-toggle" hidden>','<input type="checkbox" id="nav-toggle2" hidden>','<label for="nav-toggle" class="nav-toggle mask-content" onclick></label>','<label for="nav-toggle2" class="nav-toggle2 mask-content2" onclick></label>');
$('html.mobile #pun-navlinks').prepend('<label for="nav-toggle" class="nav-toggle" onclick></label>', $('#pun-status'));
$('html.mobile #pun-ulinks').prepend('<label for="nav-toggle2" class="nav-toggle2" onclick></label>');
 
 
var g_top = 0;
  $(window).scroll(function() {
    var top = $(this).scrollTop();
    
    if ( top > g_top ) {
      $('.newheader').fadeOut(400);
    } else {
      $('.newheader').fadeIn(400);
    }
    
    g_top = top;    
  });
 
});
</script>

Отредактировано kolobdur74 (Пн, 5 Авг 2019 16:27:21)

Поделиться28Ср, 7 Авг 2019 22:06:54

Автор: Shephard
Заслуженный
Зарегистрирован: Пт, 22 Дек 2017
Сообщений: 228
Уважение: +69
Позитив: +104
Последний визит:
Пт, 7 Июл 2023 15:56:50

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

Только для Русфф:

Код:

<!-- Общий мобильный стиль -->
<link rel="stylesheet" type="text/css" href="http://forumstatic.ru/files/000d/8d/19/77571.css">
 
<!-- Цветовая схема для мобильного стиля. Зеленый стиль -->
<link rel="stylesheet" type="text/css" href="http://forumstatic.ru/files/000d/8d/19/81991.css">
 
<!-- Скрипты для мобильного стиля -->
<script>
require.config({
    "paths": {
      "device": "https://unpkg.com/current-device@0.8.2/umd/current-device.min"
    }
});
 
require(['device']);
</script>
<script src="https://unpkg.com/current-device/umd/current-device.min.js"></script>
<div class="newheader"></div>
<script>
$(document).ready(function() {
 
$('html.mobile .punbb').prepend($('.newheader'));
$('html.mobile .newheader').append( $('#pun-title'),$('#pun-navlinks'),$('#pun-ulinks') );
 
$('html.mobile .newheader').prepend('<input type="checkbox" id="nav-toggle" hidden>','<input type="checkbox" id="nav-toggle2" hidden>','<label for="nav-toggle" class="nav-toggle mask-content" onclick></label>','<label for="nav-toggle2" class="nav-toggle2 mask-content2" onclick></label>');
$('html.mobile #pun-navlinks').prepend('<label for="nav-toggle" class="nav-toggle" onclick></label>', $('#pun-status'));
$('html.mobile #pun-ulinks').prepend('<label for="nav-toggle2" class="nav-toggle2" onclick></label>');
 
 
var g_top = 0;
  $(window).scroll(function() {
    var top = $(this).scrollTop();
    
    if ( top > g_top ) {
      $('.newheader').fadeOut(400);
    } else {
      $('.newheader').fadeIn(400);
    }
    
    g_top = top;    
  });
 
});
</script>

Установила приложение, но при перезагрузке страниц сначала выскакивает просто "скелет" (белый фон и синие надписи), быстро сменяемые нормальным дизайном. Страница переадресации тоже в состоянии "скелета". Исчез бегунок для прокручивания страницы. На планшете стиль не работает, на телефоне - мерцает блок с названием форума.

Поделиться29Ср, 7 Авг 2019 22:45:12

Автор: Alex_63
Администратор
Зарегистрирован: Чт, 11 Дек 2014
Сообщений: 10689
Уважение: +7178
Позитив: +5257
Пол: Мужской
Последний визит:
Вчера 19:52:34

Shephard
Такой эффект из-за асинхронной подгрузки файла https://unpkg.com/current-device@0.8.2/ … ice.min.js через require.js, т.е. файл загружается независимо от загрузки основной страницы и добавляет класс к html не сразу.
Пока не понял, как сделать для rusff так, чтобы грузилось синхронно.
Для планшета можно прописать собственный стиль с классом html.tablet, на него не распространяются классы .desktop и .mobile. Либо добавить один из этих классов скриптом, что-то типа

Код:

<script> $('html.tablet').addClass('desktop');</script>

Но это будет работать только в случае синхронной загрузки файла current-device.min.js.

Кстати, что если перезалить этот файл к себе на форум и подключить обычным способом, с помощью тега <script>?
Либо синхронным аякс запросом:

Код:

<script>
$.ajax({
    url: 'https://unpkg.com/current-device/umd/current-device.min.js',
    async: false,
    cache: true,
    dataType: 'script'
});
</script>

ВКонтакте alex__63

Поделиться30Ср, 7 Авг 2019 22:48:18

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

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

Страница переадресации тоже в состоянии "скелета".

Страница переадресации идет на общих селекторах, но скрипты на нее не действует, соответственно класса .desktop и .mobile на ней нет, надо отдельно прописывать стиль для страницы переадресации. Будет время сделаю стандартную страницу переадресации..

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

Исчез бегунок для прокручивания страницы.

Где именно? Ссылку на форум..

Отредактировано kolobdur74 (Ср, 7 Авг 2019 22:59:51)

Поделиться31Ср, 7 Авг 2019 22:51:17

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

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

Кстати, что если перезалить этот файл к себе на форум и подключить обычным способом, с помощью тега <script>?

Смысл в поддержке этого скрипта - разработчик его до сих пор поддерживает.. Жаль, что нельзя его для всего сервиса поставить, тогда и с страницей переадресацией не было бы проблем..

Поделиться32Ср, 7 Авг 2019 23:00:04

Автор: Alex_63
Администратор
Зарегистрирован: Чт, 11 Дек 2014
Сообщений: 10689
Уважение: +7178
Позитив: +5257
Пол: Мужской
Последний визит:
Вчера 19:52:34

kolobdur74
Смысла в установке на сервис (кстати, в таком случае его всё равно пришлось бы перезалить в libs.js, оставшись без обновлений) я не вижу, поскольку на сервисе есть стандартный стиль для мобильных устройств, в большинстве случаев обеспечивающих адаптивность.
В идеале при разработке форумных стилей реализовать адаптивность средствами CSS, сделав корректным отображение для экранов менее 540px шириной, а не прибегать к подобным костыльным решениям.

Насчет перезаливки, кстати, такой вариант предложил в качестве теста, хотя и почти уверен, что ничего не изменится в таком случае относительно работоспособности на Rusff.

ВКонтакте alex__63

Поделиться33Ср, 7 Авг 2019 23:03:56

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

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

В идеале при разработке форумных стилей реализовать адаптивность средствами CSS, сделав корректным отображение для экранов менее 540px шириной, а не прибегать к подобным костыльным решениям.

Что делать с смартфонами в 2К и 4К? @media screen устарел, а скоро он вообще перестанет работать..

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

поскольку на сервисе есть стандартный стиль для мобильных устройств, в большинстве случаев обеспечивающих адаптивность.

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

Отредактировано kolobdur74 (Ср, 7 Авг 2019 23:08:12)

Поделиться34Ср, 7 Авг 2019 23:18:20

Автор: Alex_63
Администратор
Зарегистрирован: Чт, 11 Дек 2014
Сообщений: 10689
Уважение: +7178
Позитив: +5257
Пол: Мужской
Последний визит:
Вчера 19:52:34

kolobdur74
Не имею смартфона с разрешением 2K или 4K (у меня FHD+ 2340x1080), но сомневаюсь, что на них форумы отображаются как-то иначе.
540px - это не физические 540 пикселей (таких экранов давно нет), а CSS пиксели. На устройстве с FHD+ форум в ширину тоже меньше 540 CSS пикселей становится.

Про устаревший @media screen впервые слышу, думал что-то пропустил, но нет, информации про deprecation media-запросов как таковых не нашел.
MDN утверждает, что исключены и не рекомендуются к использованию только media features вида device-width.

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

Да, но он работает если стандартный стиль не глобально изменяли, в ином случае становится корявым..

Как раз про такие случаи я и написал выше (про реализацию адаптивности).
Стиль надо не только под десктоп разрабатывать, но и под мобильные устройства (как это сделано, например, в стилях от сервиса).
В инспекторе браузера есть эмулятор экранов мобильных устройств на этот случай, его хватает для большинства изменений.

ВКонтакте alex__63

Поделиться35Ср, 7 Авг 2019 23:27:59

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

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

На устройстве FHD+ форум в ширину тоже меньше 540 CSS пикселей становится.

Потому что там по широкой 1080 пикселей - это и есть 540 пикселей.. 2К - это 1440 - надо будет уже ставить 720, а для 4К надо будет ставить 1080..

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

Про устаревший @media screen впервые слышу, думал что-то пропустил, но нет, информации про deprecation media-запросов как таковых не нашел.
MDN утверждает, что исключены и не рекомендуются к использованию только media features вида device-width.

Устаревший морально, потому как требованиям для мобильных устройств не соответствует, но и замены ему в css нет, отсюда и извраты скриптами, ну, а также создание новых единиц измерения типа viewport, viewport правда уже не совсем новый.

Поделиться36Ср, 7 Авг 2019 23:33:00

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

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

у меня FHD+ 2340x1080

Поверни телефон и посмотри на форум)))

Поделиться37Ср, 7 Авг 2019 23:45:55

Автор: Alex_63
Администратор
Зарегистрирован: Чт, 11 Дек 2014
Сообщений: 10689
Уважение: +7178
Позитив: +5257
Пол: Мужской
Последний визит:
Вчера 19:52:34

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

Потому что там по широкой 1080 пикселей - это и есть 540 пикселей.. 2К - это 1440 - надо будет уже ставить 720, а для 4К надо будет ставить 1080..

Но экраны-то размера примерно одинакового, поэтому коэффициент масштабирования на 2K и 4K устройстве будет больше. Не будет же изображение на 4K экране в два раза мельче за счет того, что пиксели стали мельче и их количество возрасло?

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

Устаревший морально, потому как требованиям для мобильных устройств не соответствует,

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

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

Поверни телефон и посмотри на форум)))

При повороте это уже будет ландшафтное положение экрана, там конечно больше, чем 540 CSS пикселей.
Даже специально сравнил отображение форума на FHD+ и HD экранах: элементы на них по размеру выглядят одинаково, ширина и высота отличаются ровно на разницу между соответствующими параметрами самих экранов. При повороте точно так же: по твоей логике на экране 2340x1080 кол-во CSS-пикселей в высоту должно быть почти в два раза больше, чем на экране 1280x720 (HD), но на деле ни разу не так, отличие опять же ровно на разницу между высотой экрана.
В то же время на 7" планшете аналогичного разрешения (HD) форум и в портретном, и в ландшафтном положении получается шире 540 CSS пикселей, к нему уже мобильный стиль не применяется (и не должен, на таком-то экране).

Так что количество CSS пикселей зависит только от масштабирования на каждом конкретном устройстве и ширина в CSS пикселях не будет выше 540px, даже на 7-дюймовой лопате с 4K такое вряд ли случится.

ВКонтакте alex__63

Поделиться38Чт, 8 Авг 2019 00:14:37

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

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

Но экраны-то размера примерно одинакового, поэтому коэффициент масштабирования на 2K и 4K устройстве будет больше. Не будет же изображение на 4K экране в два раза мельче за счет того, что пиксели стали мельче и их количество возрасло?

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

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

Не очень понял, чем он не соответствует: по-моему, кроме ширины экрана стиль больше подгонять не подо что

Вот в этом как раз и затык, что разрешение смартфонов не только догнало, но у же обогнало разрешение десктопов - много ты людей знаешь с монитором FHD+ и выше, а людей у которых такое разрешение? Отсюда и устаревание медиа, что привязка только по ширине уже не справляется, это не говоря про планшеты.. Кстати, медиа не только этим неудобен - он же еще понижает приоритет кода, что тоже каждый раз при его использовании надо помнить...

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

При повороте точно так же: по твоей логике на экране 2340x1080 кол-во CSS-пикселей в высоту должно быть почти в два раза больше, чем на экране 1280x720 (HD), но на деле ни разу не так, отличие опять же ровно на разницу между высотой экрана.

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

Поделиться39Чт, 8 Авг 2019 00:59:01

Автор: Alex_63
Администратор
Зарегистрирован: Чт, 11 Дек 2014
Сообщений: 10689
Уважение: +7178
Позитив: +5257
Пол: Мужской
Последний визит:
Вчера 19:52:34

kolobdur74
Еще раз, CSS пиксели и физические пиксели - это не одно и то же, и никакого деления на 2 там тем более нет.
Ширина вьюпорта (viewport) измеряется в CSS пикселях, зависит (и растягивается на весь экран масштабированием) от значения, заданного метатегом, где device-width - это опять же не физическое разрешение экрана устройства. Коэффициент масштабирования в данном случае - это т.н. device pixel ratio.
К примеру для моего устройства ширина вьюпорта составляет 393px (при разрешении экрана 1080x2340). Потестить можно тут.

Свернутый текст

Для iPhone X к примеру ширина вьюпорта будет равна 375px, хоть и разрешение экрана у него выше.
Media запросы привязаны к ширине вьюпорта, который при имеющемся на отображаемом сайте метатеге viewport и на 4K телефоне будет в пределах ~400px в ширину, так что значение в 540px превысится разве что без этого метатега.

ВКонтакте alex__63

Поделиться40Чт, 8 Авг 2019 16:48:27

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

Alex_63, да, понял, был неправ, я говорил о без метотега, метотег упустил из виду (вьпорт имел ввиду как единицу измерения: vw и vh).. Но тем не менее:

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

но он работает если стандартный стиль не глобально изменяли

И никто не делает так:

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

Стиль надо не только под десктоп разрабатывать, но и под мобильные устройства

Здесь мало профессиональных верстальщиков))

Отредактировано kolobdur74 (Чт, 8 Авг 2019 16:48:43)

Страница: « 1 2 3 4 »

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

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

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

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

Мобильный дизайн "Приложение". Установка сложная.

Сообщений 21 страница 40 из 75

Поделиться1Пн, 28 Янв 2019 01:11:36

Поделиться21Сб, 2 Фев 2019 01:50:10

Поделиться22Сб, 2 Фев 2019 09:13:08

Поделиться23Сб, 2 Фев 2019 12:19:39

Поделиться24Пт, 22 Фев 2019 14:13:42

Поделиться25Сб, 16 Мар 2019 16:42:53

Поделиться26Вс, 14 Июл 2019 01:55:02

Поделиться27Пн, 5 Авг 2019 16:14:26

Поделиться28Ср, 7 Авг 2019 22:06:54

Поделиться29Ср, 7 Авг 2019 22:45:12

Поделиться30Ср, 7 Авг 2019 22:48:18

Поделиться31Ср, 7 Авг 2019 22:51:17

Поделиться32Ср, 7 Авг 2019 23:00:04

Поделиться33Ср, 7 Авг 2019 23:03:56

Поделиться34Ср, 7 Авг 2019 23:18:20

Поделиться35Ср, 7 Авг 2019 23:27:59

Поделиться36Ср, 7 Авг 2019 23:33:00

Поделиться37Ср, 7 Авг 2019 23:45:55

Поделиться38Чт, 8 Авг 2019 00:14:37

Поделиться39Чт, 8 Авг 2019 00:59:01

Поделиться40Чт, 8 Авг 2019 16:48:27