pc页面自动缩放到手机端

Posted 2021-03-25 fqh123

今天做了个pc的页面，看了别人的网站在手机端能把pc端的网页刚好缩放到手机端，看着很舒服。

于是想把自己的页面也这样搞一下，刚开始，想到的是利用css3的缩放来做，想的是当屏幕尺寸改变时缩放整个页面，这样顺便写了个代码，但是在手机端却没有效果，然后仔细一想，手机端屏幕是不会变化的，根本无法触发window.onresize方法，再说，这样做了之后，在pc端改变屏幕尺寸后，页面是跟着缩放的，但是别人的网站在pc端改变屏幕尺寸时，是不会变化的，所以这样做肯定是错误的。

 

然后开始百度，看到一条评论，只需要把下边这段代码去掉就行了

<meta name="viewport" content="width=device-width,initial-scale=1.0"> 

！！！

试了一下，在页面中写的一个width=1200px的元素，能够恰到其份的适配下来！！！缩放的刚刚好

下面来了解一下meta标签中这些值的含义：

width=device-width：表示布局viewport的值是设备的宽度（也可以是特定的viewport值）
initial-scale=1.0： 设置页面的初始缩放比例
minimum-scale=1.0： 设置页面的最小缩放比例
maximum-scale=1.0：设置页面的最大缩放比例
user-scalable=no： 设置用户是否可以缩放操作

移动端默认会缩放大尺寸的页面的，当我们把上述代码去掉之后，就会随着移动端缩放的比例走，而且还可以自由放大。

 

下面是另一篇文章会对meta标签加深理解：号称---------javascript实现移动端页面按手机屏幕分辨率自动缩放的最强代码

<script>
 var phoneWidth = parseInt(window.screen.width);
 var phoneHeight = parseInt(window.screen.height);
 var phoneScale = phoneWidth/750;//除以的值按手机的物理分辨率
 var ua = navigator.userAgent;
 if (/android (d+.d+)/.test(ua)) {
 　　var version = parseFloat(RegExp.$1);
 　　// andriod 2.3
 　　if (version > 2.3) {
 　　　　document.write(‘<meta name="viewport" content="width=device-width,initial-scale=‘+phoneScale+‘,minimum-scale=‘+phoneScale+‘,maximum-scale=‘+phoneScale+‘,user-scalable=no">‘);
 　　// andriod 2.3以上
　　 } else {
 　　　　document.write(‘<meta name="viewport" content="width=device-width,user-scalable=no">‘);
 　　}
 // 其他系统
 } else {
 　　document.write(‘<meta name="viewport" content="width=device-width, initial-scale=‘+phoneScale+‘,minimum-scale=‘+phoneScale+‘,maximum-scale =‘+phoneScale +‘,user-scalable=no,">‘);
 }
</script>  

上面代码是专门针对移动端设置的meta标签缩放比例，根据设计图宽度的不同而设置的（这样的设置并不适合我的情况，因为这样设置了之后，在手机端是不能缩放的，因为上面代码写死了缩放比例）。

 

然后自己又试了试，把元素尺寸写的更大一些，当我写1800px时，手机端到450px时就不能再缩小了，当我写1200px时，手机端到300px就不能再缩小了，所以手机缩放也有一定的极限值，

我暂且认定手机端能够将大尺寸元素缩小4倍。那么，一般的手机不会低于300px；那么一般手机就能够把1200px的元素完好缩放到手机上，终于明白了为什么大多数设计图，固定尺寸为1200px，原来是这样的道理。

 

那么，我们要向将pc端的页面能够在手机端完好缩放，我们就需要将pc端的能容宽度固定在一个值之内，我选择将内容装在1200px的元素内，这样就可以让pc端网页在移动端完好缩放了。