pc网页在手机端预览时,会存在样式混款,横向滚动,此时我们想让pc的网页等比缩小到移动端展示网页,直接加以下js就好啦:
<script>
/***
*判断屏幕大小更改网页缩放比例
*/
function initScreen() {
var viewport = document.querySelector("meta[name=viewport]");
if(!viewport){
$("head").append('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">')
}
if(!document.querySelector("meta[http-equiv]")){
$("head").append('<meta http-equiv="X-UA-Compatible" content="ie=edge">')
}
var viewport = document.querySelector("meta[name=viewport]");
var winWidth = $(window).width();
var size = winWidth / 1200;
if (winWidth < 480) {
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=yes');
$("html").css({"transform":"scale("+size+")","transform-origin":"0 0",'width':'1200px',"height":"100vh"});
}
}
$(function(){
initScreen()
})
</script>
meta默认设置就是会在移动端等比缩放展示的。
默认设置meta在移动端就会缩放:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
设置<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">不允许缩放