mobile 像素布局纵向全屏

清风浪迹天涯

于 2015-08-25 22:41:53 发布

阅读量705

点赞数 1

本文介绍了一种使用JavaScript和CSS实现元素根据浏览器窗口高度自动缩放的方法。通过计算目标高度与当前元素高度的比例，应用到CSS zoom属性及transform属性上，确保元素始终占据浏览器视口大约95%的高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://stackoverflow.com/questions/15438295/how-to-zoom-in-out-depending-on-browser-height-using-css-zoom-property

function zoomSquare() {
    var $square = $('.square');

    var viewportHeight = $(window).height();
    var squareHeight = $square.height();
    var desiredHeight = Math.round(viewportHeight * 0.95);
    var zoom = (desiredHeight / squareHeight);

    $square.css('zoom', zoom);
    $square.css('-moz-transform', 'scale(' + zoom + ')');
    $square.css(  '-o-transform', 'scale(' + zoom + ')');
}

// When the browser is resized
$(window).on('resize', function(){ zoomSquare(); });

// When the page first loads
$(document).ready(function(){
    zoomSquare();
});