Question

基本上，我有一个包含我整个网站的div。它的高度为625px，宽度为1250px。有什么方法可以在调整浏览器窗口大小或在移动设备/平板电脑上使用时保持缩放比例吗？我知道有些人会说使用%代替px，但我有一个非常有控制的用户界面。

在某个浏览器中使用网站的时候还有弹出窗口吗？

由于

Answer 1

最好和最直接的答案是使用%，因为这是预期用途。我真的建议你重新设计你的布局，以便可以使用百分号。

如果这对您不起作用，则@ sable-foste和@ abdul-malik指出总是有媒体查询http://www.w3.org/TR/css3-mediaqueries/或Javascript。

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);
}

并在加载时添加对函数的调用。我认为这样做可能会给你带来更多问题，因为这会缩小包含元素的大小，它的内容会发生什么变化？如果按比例缩小以适应移动电话的纵向显示，显示屏将是微小且毫无意义的，它内部的布局会是什么？

调整窗口大小时，将div大小更改为缩放

2 个答案: