一般没有做过手机适配的pc网站，通常在PC端没有问题，但是使用手机端浏览器打开网站就会出现图片兼容性问题，并且显示的默认尺寸都比较大。

因为一般PC网站都缺少一行代码 <meta name=”viewport” content=”width=device-width,initial-scale=1,maximum-scale=1″>，重点是device-width和initial-scale的值，不同手机设备的宽度device-width都不同，initial-scale的值也要跟着变化，即initial-scale = device-width / 页面宽度（CSS中定义的整个网站页面宽度，我的网站宽度是1200px），所以需要把initial-scale的值根据不同手机端设备的分辨率宽度来计算，做成一个变量。我就想到了使用js代码来自动获取手机端设备的宽度，并使用js代码判断手机端浏览器类型。

代码如下（仅供参考）：

/***********************************************************
Filename: js/pc.js
Note : pc、手机、平板终端判断
Version : 1.0
Web : www.xxx.com
Author : wangyong
Update : 2019年12月30日
PS：关键点为initial-scale值，需要获取移动设备的宽度，initial-scale = 设备宽度 / 网站页面宽度
***********************************************************/

var deviceWidth = parseInt(window.screen.width); //获取当前设备的屏幕宽度 ，笔记本的屏幕宽度是1366

//alert("deviceWidth:" + deviceWidth );

var deviceScale = deviceWidth / 1200; //得到当前设备屏幕与1200之间的比例，之后我们就可以将网页宽度固定为1200px
//alert("deviceScale:" + deviceScale );

var os = function (){
var ua = navigator.userAgent,
isWindowsPhone = /(?:Windows Phone)/.test(ua),
isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
isAndroid = /(?:Android)/.test(ua),
isFireFox = /(?:Firefox)/.test(ua),
isChrome = /(?:Chrome|CriOS)/.test(ua),
isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
isPhone = /(?:iPhone)/.test(ua) && !isTablet,
isPc = !isPhone && !isAndroid && !isSymbian;
return {
isTablet: isTablet,
isPhone: isPhone,
isAndroid: isAndroid,
isPc: isPc
};
}();

/*
//注释部分有时候对iphone无效
if (!os.isPc)
{

document.write('<meta name="viewport" content="width=device-width,initial-scale=' + deviceScale + ',maximum-scale=1" />'); //替换变量deviceScale
document.write('<meta name="apple-mobile-web-app-capable" content="yes">');
document.write('<meta name="full-screen" content="yes">');
document.write('<meta name="x5-fullscreen" content="true">');
alert('<meta name="viewport" content="width=device-width,initial-scale=' + deviceScale + ',maximum-scale=1.0" />');
}
else if (os.isPc)
{
document.write('<meta name="viewport" content="width=device-width,initial-scale=1">');
}
else if (os.isTablet)
{
alert('<meta name="viewport" content="width=device-width,initial-scale=' + deviceScale + ',maximum-scale=1.0" />111');
document.write('<meta name="viewport" content="width=device-width,initial-scale=' + deviceScale + ',maximum-scale=1" />'); //替换变量deviceScale

document.write('<meta name="apple-mobile-web-app-capable" content="yes">');
document.write('<meta name="full-screen" content="yes">');
document.write('<meta name="x5-fullscreen" content="true">');

}
*/

//经过调式，需要分别判断进行页面初始值initial-scale适配，安卓、iphone、ipad均调式通过
if (os.isAndroid)
{
document.write('<meta name="viewport" content="width=device-width,initial-scale=' + deviceScale + ',maximum-scale=1">'); //替换变量deviceScale
document.write('<meta name="apple-mobile-web-app-capable" content="yes">');
document.write('<meta name="full-screen" content="yes">');
document.write('<meta name="x5-fullscreen" content="true">');
document.write('<meta name="format-detection" content ="telephone=yes">');
alert('<meta name="viewport" content="width=device-width,initial-scale=' + deviceScale + ',maximum-scale=1.0" />isAndroid');

}
else if(os.isPhone)
{
document.write('<meta name="viewport" content="width=device-width,initial-scale=' + deviceScale + ',maximum-scale=1">'); //替换变量deviceScale
document.write('<meta name="apple-mobile-web-app-capable" content="yes">');
document.write('<meta name="full-screen" content="yes">');
document.write('<meta name="x5-fullscreen" content="true">');
document.write('<meta name="format-detection" content ="telephone=yes" />');
//alert('<meta name="viewport" content="width=device-width,initial-scale=' + deviceScale + ',maximum-scale=1.0" />isPhone');

}
else if (os.isTablet)
{
document.write('<meta name="viewport" content="width=device-width,initial-scale=' + deviceScale + ',maximum-scale=1">'); //替换变量deviceScale
document.write('<meta name="apple-mobile-web-app-capable" content="yes">');
document.write('<meta name="full-screen" content="yes">');
document.write('<meta name="x5-fullscreen" content="true">');
//alert('<meta name="viewport" content="width=device-width,initial-scale=' + deviceScale + ',maximum-scale=1.0" />isTablet');
}
else if (os.isPc)
{
document.write('<meta name="viewport" content="width=device-width,initial-scale=1">');
document.write('<meta name="format-detection" content ="telephone=no">');
//alert("ispc" );
}
else
{
document.write('<meta name="viewport" content="width=device-width,initial-scale=' + deviceScale + ',maximum-scale=1">');
}

上面js代码中有一部分代码判断无效的情况，不知道什么原因，需要分开判断。有知道原因的请留言，有更完美的代码请提供，谢谢。