body指定最小高度和宽度,设计时页面数据不要太满
<body style="min-width:1366px;min-height:689px">
通过scale进行按比例缩小,这种设计是按照最大设计,该示例是1920*1080
<script>
//监听浏览器变化
window.onresize = function() {
setAppScale();
};
function setAppScale() {
var ratioX = 1;
var ratioY = 1;
//小分辨率
if($(window).width()<1366){
console.log("-------:",$(window).width());
//transform中的参数为非整数,会导致字体模糊
var ratioX = $(window).width()/1366;
console.log("ratioX-------:",ratioX);
}
if($(window).height()<689){
console.log("-------:",$(window).height());
//transform中的参数为非整数,会导致字体模糊
var ratioY = $(window).height()/689;
console.log("ratioY-------:",ratioY);
}
$("body").css({
transform: "scale("+ratioX+","+ratioY+")",
transformOrigin: "left top",
overflow:"hidden"
});
}
$().ready(function(){
//初始化时调整大小
setAppScale();
});
</script>