原理:利用css3 transform 属性
代码:
body{ width: 810px; height: 340px; margin: 0px; padding: 0px; background-color: #2e2423; display: none; /**先隐藏,缩放后再显示,防止闪烁**/ }
<!-- 脚本 --> <script src="${rc.contextPath}/js/jquery/jquery-2.0.3.min.js"></script> <script type="text/javascript"> //缩放视图 $(document).ready(function(){ resizeDiv(); }); var resizeDiv = function(){ var width = $(window).width(); var height = $(window).height(); var scaleX = width/810; //设备默认宽度为810px var scaleY = height/340; //设备默认高度为340px //按设备比例缩放div的比例 var scaleFunc = "scale("+scaleX+","+scaleY+")"; $('body').css({ "transform":scaleFunc, //缩放比例 "transform-origin":"left top", //缩放基点 "-ms-transform":scaleFunc, /* IE 9 */ "-ms-transform-origin":"left top", "-moz-transform":scaleFunc, /* Firefox */ "-moz-transform-origin":"left top", "-webkit-transform":scaleFunc, /* Safari 和 Chrome */ "-webkit-transform-origin":"left top", "-o-transform":scaleFunc, /* Opera */ "-o-transform-origin":"left top", }); $('body').show(); }; </script>