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

时间:2024-03-11 16:17:58

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