js css html 让页面自动适配手机电脑设备页面进行缩放【强，无效留言来找我】

问题：

页面css非按百分比，设置了固定px宽度、高度，如何快速、方便，让页面按手机设备自动设配页面缩放？

通常几种方法：

1、百分比再设置一下 mata viewport

2、flex布局

3、rem

4、css的MediaQuery模块，也就是  @media screen and (max-width: 800px) { }/*当屏幕尺寸小于800px时，应用下面的CSS样式*/

5、略，总之就是加改！

 

重点

省事暴力快速方法：（话不多说）

前提：如果你的页面是按固定px值，又不想太麻烦，那就(￢_￢)对了

（通过 js 动态控制 meta  viewport 的初始缩放大小） 直接复制js 粘贴到 head meta viewport 下

//我的html meta viewport，定义 id，下面有用
<meta name="viewport" id="view" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> 

<script type="text/javascript">
    
//获取设备类型

	var ua = navigator.userAgent;

	var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),

	isIphone =!ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),

	isAndroid = ua.match(/(Android)\s+([\d.]+)/),

	isMobile = isIphone || isAndroid;

	//判断

	if(isMobile){
//获取设备像素
	    var devicewidth = document.documentElement.clientWidth;
	    var devicewidth2 = window.screen.width;
	    console.log(devicewidth2);
	    console.log(devicewidth);
//按照比例 设置id为view的content值为scale，ok
	    var scale = devicewidth / 1200; //1200是我原本设计PC页面固定的大小，根据你自己页面进行修改
	    console.log(scale);

	  	document.getElementById("view").setAttribute('content',"user-scalable=yes, width=device-width, initial-scale="+scale);

	}else{

	}

</script>

 

效果就是：动态按比例缩放