Изменить размер div на масштаб при изменении размера окна

Question

В принципе, у меня есть div, который содержит весь мой сайт. он имеет высоту 625px и ширину 1250px. Есть ли способ изменить его размер, сохраняя масштаб при изменении размера окна браузера или его использовании на мобильном устройстве/планшете? Я знаю, что кто-то скажет использовать % вместо px, но у меня очень контролируемый интерфейс.

Также есть ли какие-либо всплывающие окна, когда сайты используются в определенном браузере?

Благодаря

Answer 1

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

Если это не сработает для вас, всегда есть Media Queries http://www.w3.org/TR/css3-mediaqueries/ или Javascript, как указано в @ sable-foste и @ abdul-malik.

Answer 2

По какой-то причине вы делаете это, Вы можете использовать эту функцию (с помощью JQuery):

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

function resizeSite(){ 
    var winH = $(window).height(); 
    var winW = $(window).width(); 
    // you will want to do some stuff here for deciding what to do and when... 
    // when the window size is too small shrink the site using your ratio 
    // when the window is larger increase the size of your site i.e. 
    // Height = Width/2 
    // Width = Height * 2 
    var tgtW = winH * ratio; 
    var tgtW = winH * ratio; 
    $("#siteContainer").height(tgtH).width(tgtW); 
} 

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