За последние 24 часа нас посетили 50604 программиста и 1690 роботов. Сейчас ищут 985 программистов ...

Отображение HTML элемента в зависимости от девайса

Тема в разделе "PHP для новичков", создана пользователем romagromov, 25 фев 2019.

  1. romagromov

    romagromov Активный пользователь

    С нами с:
    17 дек 2015
    Сообщения:
    73
    Симпатии:
    0
    Здравствуйте!
    Изучаю один сайт и вижу одну такую весчь.
    У них в карточке программы, если открыть ее на декстопе описание отображается полностью,
    например тут - https://biblsoft.ru/android/internet/social-networks/1514-vk-coffee
    А если открыть эту же страницу с мобильного устройства - то текст отображается не весь, а в конце появляется кнопка "Подробнее":

    [​IMG]

    Если открыть страницу на десктопе и уменьшить ее ширину до мобильного телефона - кнопка не появляется. Это говорит о том, что это не адаптивная верстка и не JS код. Это (видимо) сделано с помощью php. Возникает вопрос - а есть такая готовая универсальная библиотека, определяющая устройство, с которого заходят на сайт, чтобы можно было ее применить в условиях типа:
    if (mobile = true) {
    echo "Mobile";
    }
    Ну типа такого. Спасибо.
     
  2. miketomlin

    miketomlin Старожил

    С нами с:
    9 авг 2016
    Сообщения:
    3.859
    Симпатии:
    656
    К пыху это скорее всего никаким боком не относится (прошли уже времена отдельных версий для мобилы и десктопа). См. исходный текст страницы.
     
  3. Babka_Gadalka

    Babka_Gadalka Активный пользователь

    С нами с:
    16 фев 2019
    Сообщения:
    162
    Симпатии:
    23
    Адрес:
    Москва, Пушкина, Избушкина, 2й этаж душечка.
    css3
     
  4. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.771
    Адрес:
    :сердА
    Это говорит о том, что ты не в курсе, как работают css media-queries. А их тут на сайте хренова гора. Видишь полоски наверху цветные?

    upload_2019-2-26_11-46-26.png


    Порезаные на кучу кусочков? Это вот они, родные. Ряд запросов заложен только для мобил. По этому десктопный браузер не отображает скрывалку просто при уменьшении страницы. Но верстка все равно перестраивается. Если включить отдачу браузером флагов для медиазапросов типа screen и плотность пикселя высокую, CSS отработает как для мобилки.
     
  5. romagromov

    romagromov Активный пользователь

    С нами с:
    17 дек 2015
    Сообщения:
    73
    Симпатии:
    0
    @Fell-x27 Я знаю прекрасно, что такое css media-queries.
    1. Само по себе css - это стили. Они не могут изъять HTML код со страницы.
    2. В них нет такого понятия, как мобильное устройство. Все упирается в размеры экрана.

    В нашем случае, на мобильном устройстве на странице отображается кнопка "Подробнее"
    за это отвечает часть HTML кода на странице:
    HTML:
    1. <a class="displaymore" href="#">Подробнее</a>
    А в десктопной версии этого кода на странице просто нет!
    А раз так, значит что-то убирает код из HTML, в зависимости от устройства.
    Так что, нет такой библиотеки для PHP?
    --- Добавлено ---
    Как это прошли?
    Вот представьте, у вас есть декстопная версия сайта. Есть сайдбар с модулями.
    В мобильной версии он не нужен. Его нужно просто исключить вообще из кода.
    Чтобы страница на мобилке была легче, открывалась быстрее.
    Или второй вариант. Мы используем css media-queries и скрываем весь сайдбар или перемещаем его под основной контент.
    Но в таком случае, код физически будет находится на странице.
    Поэтому отключение каких-то элементов с помощью php в сочетании с адаптивной версткой - очень эффективная штука.
     
  6. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.771
    Адрес:
    :сердА
    Запросто. display: none;
    Нет. Там чего только нет. В том числе тип устройства, портреная или ландшафтная ориентированность, замеры по размеру вьюпорта или максимальному размеру экрана(собсно причина, почему простого сжатия недостаточно для активации именно мобильных фич), и, даже...уровень освещенности окружения. Читайвникай.
    Его и в мобильной версии нет в ответе сервера. Такие дела.
    Нет, это значит, что что-то его добавляет в HTML в зависимости от устройства. Казалось бы, при чем тут медиакверис и JS?
    --- Добавлено ---
    Или третий вариант - ты можешь делать с DOM что угодно в принципе, через JS. Добавлять любые узлы, удалять любые узлы..
     
  7. romagromov

    romagromov Активный пользователь

    С нами с:
    17 дек 2015
    Сообщения:
    73
    Симпатии:
    0
    display: none; - не убирает код из HTML, а сообщает браузеру с помощью CSS, что данный элемент не следует отображать. Сам элемент в браузере, код остается.

    Есть конечно. Даже не нужен мобильный девайс. Просто консоль Chrome.
    Когда включаешь эмуляцию мобильника в на странице есть код
    HTML:
    1. <a class="displaymore" href="#">Подробнее</a>
    В декстопе его нет.

    Возможно. Но выше указанное, говорит о том, что это реализация через php.

    Так в итоге :D
    Есть библа под php? Я не хочу громоздить медиакверис и JS - это все лишний код на странице.
    Надо вырубать рубильником еще до генерации страницы.[/QUOTE]
     
  8. mkramer

    mkramer Суперстар
    Команда форума Модератор

    С нами с:
    20 июн 2012
    Сообщения:
    8.598
    Симпатии:
    1.764
    А ты не в разделе Elements случайно смотришь? Там показываются и созданные JS-ом элементы
    Есть, но они все не точные http://mobiledetect.net/. Сейчас как раз таки стараются вместо таких либ пользовать медиа-запросы
     
    romagromov нравится это.
  9. romagromov

    romagromov Активный пользователь

    С нами с:
    17 дек 2015
    Сообщения:
    73
    Симпатии:
    0
    Я смотрю просто HTML код cltr+U.
    Как смотреть в разделе Elements?
    --- Добавлено ---
    ага, за http://mobiledetect.net/ спасибо.
    --- Добавлено ---
    нормально работает - http://demo.mobiledetect.net/