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>

 

效果就是：動態按比例縮放