原理:利用css3 transform 屬性 代碼: ...
原理:利用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>