Как заставить работать кнопку «Полная версия сайта» в мобильных Chrome и Safari (с точки зрения разработчика сайтов)

11 March 2018, 03:40 MSK
Я долго думал, стоит ли публиковать в блоге не свой код, и решил, что иногда всё-таки стоит, потому что решение описываемой в этом посте проблемы в рунете мне найти не удалось.
Сразу к делу. В мобильном Сафари уже несколько Айосов подряд есть такая замечательная кнопка (вызывается по долгому нажатию на значок перезагрузки страницы в адресной строке):
request-desktop-site
Такая же кнопка есть в Хроме на Андроиде и Айосе. В английском интерфейсе называется «Request Desktop Site».
К сожалению, работает она по-дурацки: когда нажимаешь эту кнопку, браузер просто подменяет свой юзер-агент с мобильного на десктопный, и всё. Кто-нибудь верстает сайты так, чтобы подсовывать браузерам разные стили в зависимости от юзер-агента? Обычно нет.
Как правило, нормальные адаптивные сайты верстаются с использованием медиа-запросов, например, так:
@media all and (max-width: 999px) {
    ...
}
К счастью, для этой проблемы есть решение. Нужно просто вставить на ваш сайт данный код на джаваскрипте:
(function(d){
    function c(k){return(d.cookie.match('(^|; )'+k+'=([^;]*)')||0)[2];}
    var ua = navigator.userAgent,
        ismobile = / mobile/i.test(ua),
        mgecko = !!( / gecko/i.test(ua) && / firefox\//i.test(ua)),
        wasmobile = c('wasmobile') === "was",
        desktopvp = 'user-scalable=yes, width=1000, minimum-width=1000',
        el;
    if (ismobile && !wasmobile) {
        d.cookie = "wasmobile=was";
    }
    else if (!ismobile && wasmobile) {
        if (mgecko) {
            el = d.createElement('meta');
            el.setAttribute('content', desktopvp);
            el.setAttribute('name', 'viewport');
            d.getElementsByTagName('head')[0].appendChild(el);
        }else{
            d.getElementsByName('viewport')[0].setAttribute('content', desktopvp);
        }
    }
}(document));
Собственно, что здесь происходит. По юзер-агенту определяется, мобильный браузер или нет, устанавливается соответствующая кука. Если после перезагрузки страницы браузер не «мобильный» (произошла подмена юзер-агента после нажатия кнопки «Полная версия сайта»), скрипт эмулирует ширину окна браузера в 1000 пк (при помощи мета-тэга viewport).
Поделиться
Отправить
Тэги: JSwebdev