Всем привет!
Люди добрые, есть дизайнерский сайт, заточен под разрешение 1583px в ширину. Под мобилки и планшеты через viewport подогнать удалось.. Но проблема осталась с обычным браузером, т.к. он игнорирует масштабирование таким способом. Как можно глобально изменить масштаб всего сайта целиком в зависимости от разрешения экрана?
Резиновый дизайн не рассматривается.
Погуглив, наткнулся на такой скрипт
<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>
#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; }
Но по какой-то причине, не известной мне, в консоли выдает
Uncaught TypeError: Cannot read property 'clientWidth' of nullПрошу помощи! В JS не силен..
Адрес сайта:
http://restaurant-tabasco.ru/ Joomla 3.4
Сайт где нашел скрипт
http://new.xpro.su/html-css/site-scaling
Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
|