Как реализовать веб-страницу, которая масштабируется при изменении размера окна браузера? - PullRequest
5 голосов
/ 18 сентября 2008

Как реализовать веб-страницу, которая масштабируется при изменении размера окна браузера?

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

У меня есть рабочее решение, использующее AJAX PRO и DIVs с переполнением: auto и хук onwindow, но он громоздок. Есть ли лучший способ?

  • спасибо всем за ответы, я собираюсь попробовать их все (или, по крайней мере, большинство из них), а затем выбрать лучшее решение в качестве ответа на эту тему

  • кажется, что лучше всего использовать CSS и проценты, что я и делал в оригинальном решении; использование видимости: скрытый div, установленный на 100% на 100%, позволяет измерить клиентскую область окна [сложно в IE, в противном случае], а функция onwindowresize javascript позволяет методам AJAXPRO запускаться при изменении размера окна, чтобы перерисовать содержимое ячейки макета в новом разрешении

РЕДАКТИРОВАТЬ: мои извинения за то, что не совсем ясно; Мне нужна была «жидкая компоновка», в которой основные элементы («панели») масштабировались при изменении размеров окна браузера. Я обнаружил, что мне пришлось использовать вызов AJAX, чтобы повторно отобразить содержимое панели после изменения размера, и сохранить переполнение: авто включено, чтобы избежать прокрутки

Ответы [ 11 ]

0 голосов
/ 29 января 2010

PAGE

    /**** Page Rescaling Function ****/

    function resizeWindow() 
    {
        var windowHeight = getWindowHeight();
        var windowWidth = getWindowWidth();

        document.getElementById("content").style.height = (windowHeight - 4) + "px";
    }

    function getWindowHeight() 
    {
        var windowHeight=0;
        if (typeof(window.innerHeight)=='number') 
        {
            windowHeight = window.innerHeight;
        }
        else {
            if (document.documentElement && document.documentElement.clientHeight) 
            {
                windowHeight = document.documentElement.clientHeight;
            }
            else 
            {
                if (document.body && document.body.clientHeight) 
                {
                    windowHeight = document.body.clientHeight;
                }
            }
        }
        return windowHeight;
    }

Решение, над которым я сейчас работаю, нуждается в нескольких изменениях ширины, в противном случае высота пока работает нормально ^^

-Ozaki

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...