pc网站在手机端适配js代码实现

最新做了一个网站，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代码中有一部分代码判断无效的情况，不知道什么原因，需要分开判断。有知道原因的请留言，有更完美的代码请提供，谢谢。