div按照屏幕尺寸(设备大小)进行缩放
原理:利用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>

浙公网安备 33010602011771号