• Как сделать ссылку на Viber?

    Middle_Pudge
    @Middle_Pudge
    Дело в том что десктопное и мобильное приложение Viber открывается по разным ссылкам, что создает определенные сложности при добавлении такой ссылки на сайт. Поэтому потратьте 2 минуты чтобы прочитать и понять текст ниже) Для мобильных устройств используется такой подход формирования ссылки:
    <a href="viber://add?number=380950000000">Написать в Viber</a>

    Для ПК – такой:
    <a title="Должен быть установлен Viber для ПК" href="viber://chat?number=+380950000000">Написать в Viber</a>


    Для того, чтобы определить устройство при помощи PHP, в самом простейшем случае можно воспользоваться простейшей функцией, которая определяет USER_AGENT устройства, а затем, в зависимости от того, опередила ли функция устройство как мобильное или нет, показывать ту или иную ссылку.
    <?php function check_mobile_device() { 
        $mobile_agent_array = array('ipad', 'iphone', 'android', 'pocket', 'palm', 'windows ce', 'windowsce', 'cellphone', 'opera mobi', 'ipod', 'small', 'sharp', 'sonyericsson', 'symbian', 'opera mini', 'nokia', 'htc_', 'samsung', 'motorola', 'smartphone', 'blackberry', 'playstation portable', 'tablet browser');
        $agent = strtolower($_SERVER['HTTP_USER_AGENT']);    
        foreach ($mobile_agent_array as $value) {    
            if (strpos($agent, $value) !== false) return true;   
        };     
        return false; 
    };?>

    Расположить функцию, можно, например в самом начале страницы, перед 'doctype' или вынести в отдельный файл и там же подключить его.

    После этого, в месте где будет выводиться ссылка на Viber используйте такую проверку:
    <? if(check_mobile_device()) :?>
    	<a title="Viber" href="viber://add?number=79851198793"></a>              
    <? else : ?>
    	<a title="Viber" href="viber://chat?number=+79851198793"></a>
    <? endif; ?>

    Теперь, если человек зашел с ПК, то ему покажется ссылка для десктопного приложения, а если с мобильного устройства, то ссылка для смартфона или планшета.
    Ответ написан
    Комментировать
  • Как сверстать на CSS подобную адаптивную сетку?

    profesor08
    @profesor08 Куратор тега CSS
    Если блоки не собираются рандомно, то можно гидами обойтись, если рандомно, то masonry. На гридах примется разметить позиции блоков и задать блокам имена.
    Ответ написан
    Комментировать
  • Как сверстать на CSS подобную адаптивную сетку?

    Если исключительно на CSS - тогда CSS Grid - идеальное решение

    Но в гридах отдельным колонкам нужно будет присвоить свои позиции и размеры...
    + Так-же прописать адаптивный вариант

    Вот несколько вариантов (заготовок):
    https://jsfiddle.net/ischenkodv/t337a0br/
    https://jsfiddle.net/girlie_mac/QUPFS/
    Ответ написан
    Комментировать