JS針對pc頁面固定寬度在手機展現問題

結合一些 網上大神級前端做品的 介紹 修改了一下本身的代碼  作出了一個相對簡單的縮放代碼  

1.

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

meta標籤的做用是讓當前viewport的寬度等於設備的寬度，同時不容許用戶手動縮放。也許允不容許用戶縮放不一樣的網站有不一樣的要求，但讓viewport的寬度等於設備的寬度。

 

 

下面是我結合修改的代碼

 

<!--頁面寬度適配 顯示相同寬度 但每一個設備所顯示的像素大小不同-->

通過測試  發現  在手機QQ  微信  等 X5內核瀏覽器也能夠使用 支持手動縮放 

 

1 (function () {
2 var meta = document.createElement("meta");
3 var width = window.screen.width;
4 var targetWidth = 1500;
5 var scale = width / targetWidth;
6 meta.name = "viewport";
7 meta.content = "width=device-width,initial-scale=" + scale + ",minimum-scale=" + scale + ",maximum-scale=1,user-scalable=yes,target-densitydpi=" + width;
8 document.head.appendChild(meta);
9 })();

 

 

width  是獲取手機的顯示器寬度 ； targetWidth   爲你的頁面在pc 端顯示器寬度(可根據我的實際狀況修改)；scale  獲取網站的縮放比例  ； 

user-scalable=yes； 因爲我製做的頁面通常在pc端顯示 使用的字體大小單位是px；因此加了一個手動縮放功能便於提升用戶體驗。