Как заставить работать кнопку «Полная версия сайта» в мобильных Chrome и Safari (с точки зрения разработчика сайтов)
11 March 2018, 03:40 MSK
Я долго думал, стоит ли публиковать в блоге не свой код, и решил, что иногда всё-таки стоит, потому что решение описываемой в этом посте проблемы в рунете мне найти не удалось.
Сразу к делу. В мобильном Сафари уже несколько Айосов подряд есть такая замечательная кнопка (вызывается по долгому нажатию на значок перезагрузки страницы в адресной строке):
Такая же кнопка есть в Хроме на Андроиде и Айосе. В английском интерфейсе называется «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).
Источник кода: https://github.com/dtipson/request-desktop-site
Поделиться
Твитнуть
Телеграмнуть
Вотсапнуть
