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代碼中有一部分代碼判斷無效的情況，不知道什么原因，需要分開判斷。有知道原因的請留言，有更完美的代碼請提供，謝謝。