JS针对pc页面固定宽度在手机展示问题 <meta ...>

结合一些 网上大神级前端作品的 介绍 修改了一下自己的代码  做出了一个相对简单的缩放代码

1.

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

meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度。

下面是我结合修改的代码

<!--页面宽度适配 显示相同宽度 但每个设备所显示的像素大小不一样-->

经过测试  发现  在手机QQ  微信  等 X5内核浏览器也可以使用 支持手动缩放

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

width  是获取手机的显示器宽度 ； targetWidth   为你的页面在pc 端显示器宽度(可根据个人实际情况修改)；scale  获取网站的缩放比例  ；

user-scalable=yes； 由于我制作的页面一般在pc端显示 使用的字体大小单位是px；所以加了一个手动缩放功能便于提高用户体验。