标签：andriod exp screen doc meta one 变化 color 默认
今天做了个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端网页在移动端完好缩放了。
标签：andriod exp screen doc meta one 变化 color 默认
原文地址：https://www.cnblogs.com/fqh123/p/11723320.html
