Здравствуйте, есть сайт, который не адаптирован под мобильные устройства и на телефоне выглядит уродливо. Заказчик хочет, чтоб на мобильном устройстве просто была уменьшенная копия сайта. То есть чтоб он полностью умещался в окне браузера, а пользователь, при необходимости мог зумить.
Я для этого прописал
<meta name="viewport" content="width=1800, initial-scale=1">
Как я понимаю, этим тегом я сообщаю мобильным устройствам, что сайт нужно отображать так, как будто ширина экрана браузера 1800.
Дальше работу этого тега я понять не смог. Он действительно отобразил уменьшенную копию сайта, но только контент немного сдвинут вправо, причем так, что часть контента не видна. Скролла нет, то есть этот обрезанный контент увидеть невозможно. При увеличении параметра width, например, 2200, контент еще сильнее двигается вправо. (сам контент - это
<section style="width:100%; max-width:1400px;margin:0 auto"></section>
). Методом тыка, я нашел, что 1620 - идеальное значение, при котором на моем телефоне сайт выглядит просто уменьшенной копией. Но, к сожалению, открыв сайт на другом телефоне с другим разрешением, сайт выглядит неровно.
Как (и возможно ли) мне сделать, чтоб сайт "правильно" отображался на мобильных устройствах?
Спасибо.
