Зум страницы вызывает проблемы

280

17 августа 2017, 21:41

Доброе время суток, прощу прощения у тех, у кого забираю время, но у меня возникла проблема. Сайт почти готовый, и уже был готов к сдаче, на всех устройствах адаптивно показывался, но вот незадача, у заказчика раскрылся сайт на 80% страницы, конечно, многие элементы полетели. Так вот, вопрос в том, что как можно рассчитать расширение, чтобы зум на странице нормально отображался? Неужели просто умножать 1920 * 0.8 и фиксить данное разрешение? Умников с предложениями почитать больше об адаптации страницы, прошу остановиться, оно и так в планах. Благодарю за внимание. о.о

Answer 1

допустим такой вариант а там сами дальше

function fontSize() {
            var width = 1000; // ширина, от которой идет отсчет
            var size = 20; // максимальный размер шрифта
            var bodyWidth = $('html').width();
            var multiplier = bodyWidth / width;
            if ($('html').width() <= width) size = Math.floor(size * multiplier);

        }
        fontSize();
        $(window).resize(function() {
            fontSize();
        });

Answer 2

Возможно поможет выставить width:100% главного <div>. в котором находится контент, который открылся не правильно.

Вслепую тяжело угадать какие проблемы с версткой у вас на сайте. Нужно смотреть JS и/или CSS.

По поводу адаптивности скажу что bootstrap очень экономит время разработки. У него есть "адаптивность" под все экраны.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <title>Bootstrap Example</title> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 
 
<div class="container-fluid text-center"> 
  <h1>На весь экран</h1> 
 
 
 <h4>12 --- 3</h4> 
  <div class="row"> 
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div> 
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div> 
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div> 
  </div> 
   
  <h4>12 --- 2</h4>  
    <div class="row"> 
    <div class="col-sm-6" style="background-color:lavender;">.col-sm-6</div> 
    <div class="col-sm-6" style="background-color:lavenderblush;">.col-sm-6</div> 
    
  </div> 
  <h4>12 --- 4</h4> 
   <div class="row"> 
    <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div> 
    <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div> 
       <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div> 
    <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div> 
  </div> 
   
   
</div> 
 
 
</body> 
</html>