Как сделать автоматическое масштабирование fixed-witdh мобильной версии сайта?

Question

[Роман Ильин]

Есть сайт с основной и мобильной responsive-версиями

У мобильной версии особенность, её ширина фиксирована – 640 пикселей.

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

Пытался решить вопрос скриптами, типа:

zoom = $(window).width()/$("body").width()*100;
document.body.style.transform = "scale(0."+zoom+")"

На ПК всё работает, но на мобильных сильно ломает отображение страницы.

Каким образом можно адаптировать эту мобильную версию, чтобы и поисковики не ругались и отображалось красиво?

Comments

[Сергей delphinpro]

<meta name="viewport" content="width=640">

[Роман Ильин]

Сергей: Это хорошее решение, но с ним на планшетах (даже в альбомной ориентации) сайт отображается только в мобильной версии. Можно ли как-то заставить планшет отображать полную версию?

[Сергей delphinpro]

Роман Ильин: Да, плохо, что нет условного viewport =) Хотя и сам он вне стандарта )
Может быть попробовать скриптом менять его на device-width при ширине больше 640?

[Сергей delphinpro]

Роман Ильин: Небольшая заметка: условный viewport вообще-то есть в стандарте, но его нет по факту. caniuse.com/#search=%40viewport

[Роман Ильин]

Сергей: Спасибо! Да, из рабочих черновиков CSS это добро не скоро выберется.

[Роман Ильин]

Сергей: Итоговое решение получилось таким:

function dynamicViewport() {
    var currentScreen = screen.width;
    $('meta[name="viewport"]').remove();
    if (currentScreen <= 640) {
       $('<meta name="viewport" content="width=640">').appendTo('head');
    } else {
      $('<meta name="viewport" content="width=device-width">').appendTo('head');
    }
  }

document.addEventListener("DOMContentLoaded", dynamicViewport);

[Сергей delphinpro]

Роман Ильин: Я бы не стал дожидаться загрузки DOM.
Прямо в конце head код скрипта вставить.
Ну и зависимость от jQ совсем не нужна (чтобы не ждать его загрузки)

var width = document.documentElement.clientWidth;
var oldViewport = document.querySelector('meta[name="viewport"]');
var viewport = document.createElement('meta');
viewport.setAttribute('name', 'viewport');
viewport.setAttribute('content', 'width=' + (width <= 640 ? '640' : 'device-width'));
document.head.replaceChild(viewport, oldViewport);

[Сергей delphinpro]

Сергей: Две переменные здесь лишние. Только для читаемости.
И завернуть в

(function(){
  ...
})();

чтобы не засорять глобальный скоуп ненужными переменными

[Роман Ильин]

Сергей: Спасибо за рефакторинг! Не часто пишу JS, подчерпнул новое для себя.

В вашем коде я поменял document.documentElement.clientWidth на screen.width, иначе это свойство на ipad выдает 640 и остается мобильная раскладка, а screen.width показывает 768 и уже всё как надо.

P.S.: На сервисах вроде Тостера давно пора ввести денежное поощрение авторов ответов за ответы по существу.

[Сергей delphinpro]

Роман Ильин: Да, правда. Тут я профукал. Я не стал использовать screen.width, потому что это ширина дисплея устройства. На мобильных устройствах сойдет, но на десктопе при уменьшении окна не сработает код (режим отладке в хроме, например, я имею ввиду).
Возможно будет правильно работать и там и там свойство window.innerWidth (а от него я отказался изначально, потому что это ширина вместе с полосой прокрутки).
Хотя в общем-то для конкретной задачи все это несущественно.

[Роман Ильин]

Сергей: Спасибо за ответы и уделенное время!

Answer 1

[Роман Ильин]

Итоговое решение получилось таким:

(function(){
    var width = screen.width;
    var oldViewport = document.querySelector('meta[name="viewport"]');
    var viewport = document.createElement('meta');
    viewport.setAttribute('name', 'viewport');
    viewport.setAttribute('content', 'width=' + (width <= 640 ? '640' : 'device-width'));
    document.head.replaceChild(viewport, oldViewport);
})();