js实现pc网页等比缩放到移动端（h5）展示_js 基于pc屏幕分辨率等比例缩小-CSDN博客

本文链接：https://blog.csdn.net/weixin_41674235/article/details/125560428

本文介绍了一种通过JavaScript实现PC网页自动适配不同尺寸移动端设备的方法。通过调整viewport和使用等比缩放技术，确保了在小屏幕上的良好用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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">不允许缩放