响应式设计：有没有办法自动将我的网站放大和缩小到 window 的高度而不是宽度？

Question

我有一个包含内容的网站。例如，它是 900px 高和 1014px 宽。在手机等设备上，广告的大小会自动适应屏幕的宽度，如果高度过高，则显示会简单地滚动。但是我想让它适应高度而不是page/screen的宽度。

我想这样做是因为在大多数移动设备上，我的内容高度太长，这是一个问题，如果它的宽度稍短一点，那不是问题，因为我会简单地space左右.

提前致谢赛克诺斯

伊迪丝：所以这里有一些示例代码（我不允许显示原始代码）：

HTML（正文）：

<div class="content">
  //here are some images, other divs and much more 
</div>

CSS:

.content {
    position: absolute;
    left: 50%;
    margin-left: -512px;
    width: 1024px;
    height: 910px;
}

两个例子来描述现在的情况：

如果 Window/Screen 的宽度为 1200px，高度仅为 800px，则向下溢出仅在滚动可见时出现 -> 那是正常的。
如果 Windoe/Screen 的尺寸为 900px 宽度和 1000px 高度，它将 "zoom out" 我的页面，因此孔内容是可见的 -> 那也是正常的。

我的目标：我的目标是，如果 Window/Screen 的高度会随着 Content 的高度变小 -> 那么同样的事情应该像示例 2

中的正常情况一样发生

Answer 1

这是我的解决方案（示例代码）：

var result = [];
var isFirefox = typeof InstallTrigger !== 'undefined';
var contentHeight = 800; //your content
function bodySizing() {
    if(window.innerHeight < contentHeight) {
        var diff = contentHeight-window.innerHeight;
        var substractor = diff/contentHeight;
        var scale = 1-substractor;

        if(scale<1) { //only downsizing, no upsizing
            $('body').css('zoom', scale);
            $('body').css('-moz-transform', 'scale('+scale+')');
            $('body').css('-o-transform', 'scale('+scale+')');

            if(isFirefox) {
                $('body').css("background-size", result[0]*scale+"px " + result[1]*scale + "px");
            } else {
                $('body').css("background-size", result[0]+"px " + result[1] + "px");
            }   
        }    
    }
}

编辑：添加了 FF-Fix

响应式设计：有没有办法自动将我的网站放大和缩小到 window 的高度而不是宽度？

Responsive Design: Is there a way to automatically enlarge and reduce my website to the height instead of the width of the window?

html

css

browser

mobile

responsive