最新做了一个网站，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代码判断手机端浏览器类型。
代码如下（仅供参考）：
1 /*********************************************************** 2 Filename: js/pc.js 3 Note : pc、手机、平板终端判断 4 Version : 1.0 5 Web : www.xxx.com 6 Author : wangyong 7 Update : 2019年12月30日 8 PS：关键点为initial-scale值，需要获取移动设备的宽度，initial-scale = 设备宽度 / 网站页面宽度 9 ***********************************************************/ 10 11 var deviceWidth = parseInt(window.screen.width); //获取当前设备的屏幕宽度 ，笔记本的屏幕宽度是1366 12 13 //alert("deviceWidth:" + deviceWidth ); 14 15 var deviceScale = deviceWidth / 1200; //得到当前设备屏幕与1200之间的比例，之后我们就可以将网页宽度固定为1200px 16 //alert("deviceScale:" + deviceScale ); 17 18 var os = function (){ 19 var ua = navigator.userAgent, 20 isWindowsPhone = /(?:Windows Phone)/.test(ua), 21 isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone, 22 isAndroid = /(?:Android)/.test(ua), 23 isFireFox = /(?:Firefox)/.test(ua), 24 isChrome = /(?:Chrome|CriOS)/.test(ua), 25 isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)), 26 isPhone = /(?:iPhone)/.test(ua) && !isTablet, 27 isPc = !isPhone && !isAndroid && !isSymbian; 28 return { 29 isTablet: isTablet, 30 isPhone: isPhone, 31 isAndroid: isAndroid, 32 isPc: isPc 33 }; 34 }(); 35 36 /* 37 //注释部分有时候对iphone无效 38 if (!os.isPc) 39 { 40 41 document.write(\'<meta name="viewport" content="width=device-width,initial-scale=\' + deviceScale + \',maximum-scale=1" />\'); //替换变量deviceScale 42 document.write(\'<meta name="apple-mobile-web-app-capable" content="yes">\'); 43 document.write(\'<meta name="full-screen" content="yes">\'); 44 document.write(\'<meta name="x5-fullscreen" content="true">\'); 45 alert(\'<meta name="viewport" content="width=device-width,initial-scale=\' + deviceScale + \',maximum-scale=1.0" />\'); 46 } 47 else if (os.isPc) 48 { 49 document.write(\'<meta name="viewport" content="width=device-width,initial-scale=1">\'); 50 } 51 else if (os.isTablet) 52 { 53 alert(\'<meta name="viewport" content="width=device-width,initial-scale=\' + deviceScale + \',maximum-scale=1.0" />111\'); 54 document.write(\'<meta name="viewport" content="width=device-width,initial-scale=\' + deviceScale + \',maximum-scale=1" />\'); //替换变量deviceScale 55 56 document.write(\'<meta name="apple-mobile-web-app-capable" content="yes">\'); 57 document.write(\'<meta name="full-screen" content="yes">\'); 58 document.write(\'<meta name="x5-fullscreen" content="true">\'); 59 60 } 61 */ 62 63 //经过调式，需要分别判断进行页面初始值initial-scale适配，安卓、iphone、ipad均调式通过 64 if (os.isAndroid) 65 { 66 document.write(\'<meta name="viewport" content="width=device-width,initial-scale=\' + deviceScale + \',maximum-scale=1">\'); //替换变量deviceScale 67 document.write(\'<meta name="apple-mobile-web-app-capable" content="yes">\'); 68 document.write(\'<meta name="full-screen" content="yes">\'); 69 document.write(\'<meta name="x5-fullscreen" content="true">\'); 70 document.write(\'<meta name="format-detection" content ="telephone=yes">\'); 71 alert(\'<meta name="viewport" content="width=device-width,initial-scale=\' + deviceScale + \',maximum-scale=1.0" />isAndroid\'); 72 73 } 74 else if(os.isPhone) 75 { 76 document.write(\'<meta name="viewport" content="width=device-width,initial-scale=\' + deviceScale + \',maximum-scale=1">\'); //替换变量deviceScale 77 document.write(\'<meta name="apple-mobile-web-app-capable" content="yes">\'); 78 document.write(\'<meta name="full-screen" content="yes">\'); 79 document.write(\'<meta name="x5-fullscreen" content="true">\'); 80 document.write(\'<meta name="format-detection" content ="telephone=yes" />\'); 81 //alert(\'<meta name="viewport" content="width=device-width,initial-scale=\' + deviceScale + \',maximum-scale=1.0" />isPhone\'); 82 83 } 84 else if (os.isTablet) 85 { 86 document.write(\'<meta name="viewport" content="width=device-width,initial-scale=\' + deviceScale + \',maximum-scale=1">\'); //替换变量deviceScale 87 document.write(\'<meta name="apple-mobile-web-app-capable" content="yes">\'); 88 document.write(\'<meta name="full-screen" content="yes">\'); 89 document.write(\'<meta name="x5-fullscreen" content="true">\'); 90 //alert(\'<meta name="viewport" content="width=device-width,initial-scale=\' + deviceScale + \',maximum-scale=1.0" />isTablet\'); 91 } 92 else if (os.isPc) 93 { 94 document.write(\'<meta name="viewport" content="width=device-width,initial-scale=1">\'); 95 document.write(\'<meta name="format-detection" content ="telephone=no">\'); 96 //alert("ispc" ); 97 } 98 else 99 { 100 document.write(\'<meta name="viewport" content="width=device-width,initial-scale=\' + deviceScale + \',maximum-scale=1">\'); 101 }
上面js代码中有一部分代码判断无效的情况，不知道什么原因，需要分开判断。有知道原因的请留言，有更完美的代码请提供，谢谢。