1 заметка с тегом

масшабирование сайта

Автоматическое масштабирование сайта по ширине браузера клиента

Лайфхак для веб-разработчиков и веб-дизайнеров.


Вопрос возник довольно давно (по меркам IT сферы), где-то полгода назад. После этого интернет не шерстил и не знаю, насколько более изящные решения уже имеются в свободном доступе.
В тот раз за сутки решение для себя так и не отыскал, пришлось написать самому.

Задача стояла следующая: сайт не имеет адаптивной верстки для разных устройств и более того при открытии на устройствах разного типа видно только часть сайта. Клиенту приходится самостоятельно сайт масштабировать, чтобы прочитать нужный контент. Требовалось быстро (в течении суток) адаптировать сайт.

В JavaScript я самоучка, поэтому могут быть ошибки, но факт: скрипт стабильно работает полгода на всех известных мне устройствах.

Решение довольно простое:

1) Вся суть в одной функции js, с помощью которой мы вычисляем ширину браузера клиента:

bra = document.body.clientWidth;

2) Оборачиваем весь сайт в контейнер:

CSS:

div#container
{
position:relative;
width: 0px;
margin-left: 0px;
margin-right: auto;
}

HTML:

<body>
     <div id="container">
          // здесь весь сайт
     </div>
</body>

3) В  head прописываем что делать в классическом случае при открытии на мобильном (как выяснилось не всегда гладко работает):

<meta content="width=device-width" name="viewport" />

4) Поэтому приправляем скриптиком для стабильности:

<script type="text/javascript">
var w = document.documentElement.clientWidth
$('meta[name="viewport"]').attr('content','width='+w);
 </script>

5) И заканчиваем парой функций, первая из которых определяет мобильное это устройство или нет, и что делать в каждом из случаев, а вторая определяет ширину браузера и в зависимости от этого значения соответствующим образом масштабирует сайт и двигает его к верхнему краю экрана:

<script>
function isMobile() {
  try{ document.createEvent("TouchEvent"); return true; }
  catch(e){ return false; }
}
if (isMobile() == false) {

bra=0;
ty=0;
sc=0;
function resize()
{
   bra = document.body.clientWidth;
   if (bra > 1200) {ty = (bra*bra/20366)-90}
   else {
     sc = bra/1200;
     ty = -1145.57*sc*sc*sc+1987.17*sc*sc-946.657*sc+39.6038;  //математическая формула, которую пришлось вычислить для того, чтобы сдвигать масштабированный сайт к верхнему краю экрана =))
}
   if (bra < 320) {ty = -120}
   sc = bra/1200;

   $("#container").css("transform", "scale("+sc+")");

   $("#container").css("margin-top", ""+ty+"px");
}

$(document).ready(function(){
$(window).resize(function() { resize(); });
        resize();
});
}
</script>

Буду рад, если кому-нибудь пригодится. Если найдете ошибки или знаете как сделать проще и лучше — пишите, подправим.

Сайт, реализованный таким образом вот этот.