Размеры через JS
 

Здравствуйте.
Помогите побороть следующую задачу.
Имеется некий скрипт вывода в модальном окне информации:

var layer = $('#layer'),
    modal = $('#modal'),
    modalContent = '<iframe src="http://site.ru"></iframe>';
$('.modal').click(function(){
    layer.show();
    modal.show().animate({
        width: 1200,
        height: 700,
    }, function(){
        $(this).html(modalContent);
    });
});

Здесь размеры заданы в скрипте в пикселях.
Нужно задать эти размеры в процентах. Потому что, на мелких экранах все вылезает за края монитора.

Может такое в принципе невозможно?

определяете разрешение экрана, считаете нужные вам пропорции относительно разрешения экрана и подставляете в функцию создания окна.
очевидно же

Может быть проще использовать свойства стилей:

@media all and (orientation: landscape), all and (min-width: 480px) { ... }

и указать различные стили для разных размеров экрана.

А кодик можете набросать? Хотя бы примерно.

а пжалста))

var layer = $('#layer'),
    modal = $('#modal'),
    modalContent = '<iframe src="http://site.ru"></iframe>',
    wp = 0.5,// 50%
    hp = 0.3,// 30%
    w = window.outerWidth, //ширина окна
    h = window.outerHeight,//высота окна
    wWidth = w * wp, // ширина окна * 50%
    wHeight = h * hp; // высота окна * 30%


$('.modal').click(function () {
    layer.show();
    modal.show().animate({
        width: wWidth,
        height: wHeight,
    }, function () {
        $(this).html(modalContent);
    });
});

переменных наплодил для наглядности

Спасибо, все просто оказывается, а я неделю думал и так и сяк. Век живи век учись, пошел литературу читать))))