原理:利用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>
