Масштабирование широкого сайта для низких разрешений экрана
Однажды столкнулся с дизайном, который был сделан так, что минимальная ширина составляла около 1350 пикселей. Естественно, на экранах с разрешением 1280px и ниже он не влезал по ширине, что не устраивало заказчика, при этом на вариант с переменной шириной, где меню и некоторые другие элементы выводились бы в две строки, заказчик также не соглашался. Пришлось воспользоваться масштабированием с помощью свойства CSS 3 transform: scale, сделав небольшой Javascript, который рассчитывал необходимый масштаб:
<script type="text/javascript"><!--
var elm = document.getElementById('all'); // all — элемент, в который был обернут весь сайт
var coeff = document.body.clientWidth/elm.offsetWidth; // считаем коэффициент масштабирования так, чтобы элемент all занял весь экран
if (coeff>1) coeff=1; // нам нужно только уменьшение сайта, но не его увеличение, поэтому ограничиваем коэффициент сверху единицей
if (coeff<0.6) coeff=0.6; // ограничение снизу добавлено для того, чтобы сайт совсем уж не превращался в нечитаемый
if (coeff!=1.0) {
if (navigator.userAgent.indexOf('Firefox')!=-1) elm.style.boxShadow='none'; // масштабирование в Firefox порождало некорректное отображение boxshadow, и пришлось это свойство отключить
elm.style.webkitTransform =
elm.style.msTransform =
elm.style.mozTransform =
elm.style.transform = 'scale('+coeff+')'; // собственно масштабирование
}
--></script>
Кроме этого, необходимо в CSS для элемента all прописать свойство transfom-origin, чтобы при масштабировании левый верхний угол не смещался:
#all { -webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0; }
Если требуется, чтобы масштаб сайта изменялся динамически при изменении размеров окна, необходимо повесить этот же код в качестве обработчика на событие onresize.
Здравствуйте! У меня таже проблема, ширина должна быть 1580, но при использовании Вашего скрипта в консоли выдает Uncaught TypeError: Cannot read property 'clientWidth' of null.
Видимо я что-то не так делаю, в чем может быть проблема? Буду благодарен за помощь.