js实现pc网页等比缩放到移动端(h5)展示

pc网页在手机端预览时,会存在样式混款,横向滚动,此时我们想让pc的网页等比缩小到移动端展示网页,直接加以下js就好啦:

<script>
/***
 *判断屏幕大小更改网页缩放比例
 */
function initScreen() {
  var viewport = document.querySelector("meta[name=viewport]");
  if(!viewport){
    $("head").append('')
  }
  if(!document.querySelector("meta[http-equiv]")){
    $("head").append('')
  }
  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">不允许缩放

你可能感兴趣的:(JavaScript,javascript,前端,开发语言,jquery)