web端網頁適配移動端註意事項，以及遇到的問題
阿新 • • 發佈：2019-03-06
ins fig formatter lap tag element master tno tip 
1.一定要加上
<!-- name=“viewport” 指視口 width=device-width 寬度等於視口寬 initial-scale=1.0 像素比例 maximum-scale=1.0 最大縮放比例 minimum-scale=1.0 最小縮放比例 user-scalable 是否允許用戶縮放 --> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <!-- iOS 設備 begin --> <meta name="apple-mobile-web-app-title" content="標題">
2,適用css3媒體查詢
在做組態頁面顯示的時候，web端的彈框能夠正常顯示，但是在移動端就顯示有問題
添加媒體查詢樣式
/*解決彈框在手機端顯示不友好*/ @media screen and (max-device-width:830px){ .def-model .model-window{ position:fixed; margin:10px; width:inherit; height:inherit; } }
原始頁面完整html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 設置 viewport -->
<!-- <meta name = "viewport" content ="initial-scale=1.0,maximum-scale=1,user-scalable=no"> -->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<!-- iOS 設備 begin -->
<meta name="apple-mobile-web-app-title" content="標題">
<!-- IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 兼容國產瀏覽器的高速模式 -->
<meta name="renderer" content="webkit">
<title>圖形組態瀏覽</title>
<link rel="stylesheet" href="/static/ui/common/plugins/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="/static/ui/common/plugins/bootstrap-multiselect-master/css/bootstrap-multiselect.css" />
<link href="/static/ui/common/plugins/modals/alertBox/AlertBox.css" rel="stylesheet">
<link href="/static/ui/common/plugins/other/ztree/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css"/>
<link href="/static/ui/common/plugins/formElems/newValidator/css/jquery.validator.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="/static/ui/common/plugins/jquery-colorselect/jquery.minicolors.css" />
<link href="/static/ui/common/plugins/formElems/time/bootstrap_datetimepicker/css/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/static/ui/modules/common/css/style.css">
<link rel="stylesheet" href="/static/ui/modules/common/css/style.css">
<link href="/static/ui/modules/common/css/skin.css" rel="stylesheet">
<link href="/static/ui/skin/Light/modules/maker/css/config.css" rel="stylesheet">
<!-- <link data-skin href="${userSkin}/modules/maker/css/config.css" rel="stylesheet"> -->
<link href="/static/ui/modules/maker/css/maker.css" rel="stylesheet">
<script type="text/javascript" src="/static/ui/common/js/libs/require.js" data-main="/static/ui/modules/maker/js/browser" ></script>
<script>
var
View Code
js
require.config({ baseUrl:‘/static/ui/common/‘, paths:{ ‘domReady‘:‘js/functionality/domReady‘, ‘jquery‘:‘js/libs/jquery-1.11.1.min‘, ‘jquery.query‘:‘js/libs/jquery.query‘, ‘bootstrap‘:‘plugins/bootstrap/js/bootstrap.min‘, ‘minicolors‘:‘plugins/jquery-colorselect/jquery.minicolors.min‘, ‘multiselect‘:‘plugins/bootstrap-multiselect-master/js/bootstrap-multiselect‘, ‘ztree.core‘:‘plugins/other/ztree/jquery.ztree.core.min‘, ‘util‘:‘js/functionality/Util‘, ‘ztree.excheck‘:‘plugins/other/ztree/jquery.ztree.excheck‘, ‘alert‘:‘plugins/modals/alertBox/AlertBox‘, ‘nicescroll‘:‘plugins/other/nicescroll/jquery.nicescroll.min‘, ‘echarts‘:‘plugins/chart/echarts.min‘, ‘bootstrap_datetimepicker‘:‘plugins/formElems/time/bootstrap_datetimepicker/js/bootstrap-datetimepicker.min‘, ‘zhCN‘:‘plugins/formElems/time/bootstrap_datetimepicker/js/bootstrap-datetimepicker.zh-CN‘, ‘heatmap‘:‘js/libs/heatmap.min‘, ‘refreshData‘:‘../modules/maker/js/refresh‘, ‘serverAction‘:‘../modules/maker/js/server‘ }, shim:{ ‘minicolors‘:{ deps:[‘jquery‘] }, ‘bootstrap‘:{ deps:[‘jquery‘] }, ‘ztree.core‘:{ deps:[‘jquery‘] }, ‘multiselect‘:{ deps:[‘jquery‘] }, ‘refreshData‘:{ deps:[‘jquery‘] }, ‘serverAction‘:{ deps:[‘jquery‘] }, ‘jquery.query‘:{ deps:[‘jquery‘] } } }); require([‘domReady‘,‘jquery‘,‘util‘,‘echarts‘,‘heatmap‘,‘bootstrap‘,‘bootstrap_datetimepicker‘,‘zhCN‘,‘ztree.core‘,‘minicolors‘,‘alert‘,‘nicescroll‘,‘multiselect‘,‘refreshData‘,‘serverAction‘,‘jquery.query‘],function(domReady,$,util,echarts,h337){ /** * 頁面初始加載處理 */ domReady(function(){ initTimeFormate("yyyy-mm-dd"); initTimeFormate("yyyy-mm-dd","","","end"); window.ConfigData={ signs:{}, pageConfig:{ style:"width:100%;height:100%;" } } window.zIndex=0; window.energyData={ } window.historyData={ year:{}, lastYear:{}, month:{}, lastMonth:{}, lastYearMonth:{}, week:{}, lastWeek:{}, day:{}, lastDay:{}, hour:{}, lastHour:{} } window.interval={};//記錄定時器 loadPage(); initEvent(); $(".sign").click(function(){ var url=$(this).attr("url"); if(url!=undefined&&url!=""){//有配置跳轉 if(url.indexOf("http://")!=0&&url.indexOf("https://")!=0){ url=path+url; } if($(this).attr("openType")=="self"){//當前頁面跳轉 window.location.href=url; } } }) }) /** * 事件 */ var clickCode="";//點擊text時候的code function initEvent(){ //雙擊文本框的點擊事件 //判斷是手機端還是會web端 var ua = navigator.userAgent; var ipad = ua.match(/(iPad).*OS\s([\d_]+)/), isIphone =!ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/), isAndroid = ua.match(/(Android)\s+([\d.]+)/), isMobile = isIphone || isAndroid; //判斷 if(isMobile){ $("body").on("click","[showtype=‘energyData‘]",function(){ var str=$(this).attr("addpro"); if(!str){return} obj=eval("("+str+")"); //clickCode=obj[0].code; $(‘#trendCur‘).fadeTo(400,1); initTrend(obj); }) }else{ $("body").on("dblclick","[showtype=‘energyData‘]",function(){ var str=$(this).attr("addpro"); if(!str){return} obj=eval("("+str+")"); //clickCode=obj[0].code; $(‘#trendCur‘).fadeTo(400,1); initTrend(obj); }) } $("#trendCur .clo").on("mousedown",function(){return false}).click(function(){ $(this).closest(".def-model").hide(); return false; }) //趨勢點擊查詢的事件 $("#search").off("click").on(‘click‘,function(){ initTrend(clickCode); }) //彈出框的拖動事件（自己寫的，沒有限制範圍） $("body").on("mousedown",".model-window .model-head",function(event){ var ox=event.offsetX,oy=event.offsetY;//鼠標相對於目標元素的左側和頂部的距離 var pel=$(this).parent(); $(document).off("mousemove").on("mousemove",function(e){ //等於移動後鼠標的位置-點擊前鼠標相對於目標元素的距離 pel.css({ left:(e.pageX-ox)+"px", top:(e.pageY-oy)+"px", right:"auto",//這個一定要加上，否則會出現首次點擊偏差 bottom:"auto" }) }) $(document).off("mouseup").on("mouseup",function(){ $(document).off(‘mousemove‘).off(‘mouseup‘); }) }) //張得版本也ok /*$("body").on("mousedown",".model-window .model-head",function(event){ var ox=event.offsetX, oy=event.offsetY, ot=$(this).offset().top, ol=$(this).offset().left, pel=$(this).parent(); var flag=0; var osx=ol;//保存計算後的left; var osy=ot;//保存計算後的top; pel.fadeTo(60,0.6); $(document).off(‘mousemove‘).on(‘mousemove‘,function(e){ var msx=e.pageX,msy=e.pageY; osx=msx-ox;osy=msy-oy; pel.css({left:osx+‘px‘,top:osy+‘px‘,right:‘auto‘,bottom:‘auto‘}); }); $(document).off(‘mouseup‘).on(‘mouseup‘,function(event){ $(document).off(‘mousemove‘).off(‘mouseup‘); pel.fadeTo(‘fast‘,1); }); });*/ } /** * 初始化歷史曲線的時間 */ function initTimeFormate(format1, format2, view, end) { format1 = !!format1 ? format1 : "yyyy-mm-dd"; format2 = !!format2 ? format2 : "yyyy-MM-dd"; view = !!view ? view : 2; var selector = end ? $("#systemtime_end") : $("#systemtime"); selector.datetimepicker(‘remove‘); selector.datetimepicker({ language:"zh", format: format1, autoclose: true, startView: view, minView: 2 }).on("click", function () { selector.datetimepicker(‘show‘); }).off("changeDate").on("changeDate",function(ev){ var id=$(ev.target).attr("id"); var time=ev.date.Format("yyyy-MM-dd") if(id=="systemtime"){ $("#systemtime_end").datetimepicker("setStartDate",time) }else{ $("#systemtime").datetimepicker("setEndDate",time) } }); if(end){ var _date= new Date().Format(format2); //往前面減十天組成的數組 var sevenDate=getSubSeven(_date,1); selector.val(new Date().Format(format2)); $("#systemtime").val(sevenDate[sevenDate.length-1]); }else{ selector.val(new Date ().Format(format2)); } } /** * 不足10的數前面加0 */ function add0(o){ if(o<10&&String(o).length==1){ return "0"+o; }else{ return o; } } /** * 初始化曲線 */ function initTrend(obj){ clickCode=obj; var dataType=obj.dataKind; var type=""; switch(dataType){ case "YCProperty": type="yc"; break; case "KWHProperty": type="ym"; break; case "YXProperty": type="yx" break; } //模擬的數據 var data = []; var now = +new Date(2019, 1, 13); var oneDay =1000; var value = Math.random() * 1000; for (var i = 0; i < 100; i++) { data.push(randomData()); } function randomData() { now = new Date(+now + oneDay); value = value + Math.random() * 21 - 10; return { name: now.toString(), value: [ [now.getFullYear(), now.getMonth() + 1, now.getDate()].join(‘-‘)+"T"+[add0(now.getHours()), add0(now.getMinutes()), add0(now.getSeconds())].join(":")+"Z", Math.round(value) ] } } // var testData=[ // {"time":"2019-02-13T00:03:11Z","time1":"2019-2-13T00:03:11Z","value":"1000.2391000000002","status":"1.0","sname":"KJ_GKDZ_P","score":"192.0"}, // {"time":"2019-02-13T00:04:02Z","time1":"2019-2-13T00:04:02Z","value":"200.2391000000002","status":"1.0","sname":"KJ_GKDZ_P","score":"192.0"}, // {"time":"2019-02-13T00:04:13Z","time1":"2019-2-13T00:04:13Z","value":"2295.2391000000002","status":"1.0","sname":"KJ_GKDZ_P","score":"192.0"}, // {"time":"2019-02-13T00:05:04Z","time1":"2019-2-13T00:05:04Z","value":"2372.2391000000002","status":"1.0","sname":"KJ_GKDZ_P","score":"192.0"}, // {"time":"2019-02-13T00:05:13Z","time1":"2019-2-13T00:05:13Z","value":"2372.2391000000002","status":"1.0","sname":"KJ_GKDZ_P","score":"192.0"}, // {"time":"2019-02-13T00:05:15Z","time1":"2019-2-13T00:05:15Z","value":"2181.2391000000002","status":"1.0","sname":"KJ_GKDZ_P","score":"192.0"}, // {"time":"2019-02-13T00:05:33Z","time1":"2019-2-13T00:05:33Z","value":"2181.2391000000002","status":"1.0","sname":"KJ_GKDZ_P","score":"192.0"}, // {"time":"2019-02-13T00:05:53Z","time1":"2019-2-13T00:05:53Z","value":"2181.2391000000002","status":"1.0","sname":"KJ_GKDZ_P","score":"192.0"}, // {"time":"2019-02-13T00:06:06Z","time1":"2019-2-13T00:06:06Z","value":"2173.2391000000002","status":"1.0","sname":"KJ_GKDZ_P","score":"192.0"}, // {"time":"2019-02-13T00:06:17Z","time1":"2019-2-13T00:06:17Z","value":"2225.2391000000002","status":"1.0","sname":"KJ_GKDZ_P","score":"192.0"} // ] $.ajax({ url:‘/realTimeData/historyDetailSearch‘, type:"GET", datapro:obj, data:{ valueType: type, startTime: $("#systemtime").val()+" 00:00", endTime: $("#systemtime_end").val()+" 24:00", snames: obj.selectNode, }, dataType:‘json‘, success:function(res){ var rowData=res.data; if(!rowData){return} initCurve(rowData,obj) } }); } function initCurve(_data){ //if(_data.length==0){alert("此時間段無歷史數據，請更換時間！")} var resultArr=[]; for(var i=0;i<_data.length;i++){ var res=_data[i] resultArr.push({ name:new Date(res.time)+"", value:[res.time,Number(res.value).toFixed(2)] }) } initEc("echart_01",{ title: { text: !!obj.selectName?obj.selectName:‘‘, x:‘center‘ }, tooltip: { trigger: ‘axis‘, formatter: function (params) { params = params[0]; var date = new Date(params.name); return date.getFullYear() +‘/‘ + (date.getMonth() + 1) + ‘/‘ +date.getDate()+‘ ‘+date.getHours()+":"+date.getSeconds() +‘ ‘ + params.value[1]; }, axisPointer: { animation: false } }, xAxis: { type: ‘time‘, splitLine: { show: false } }, yAxis: { type: ‘value‘, //name:"kWh", // boundaryGap:[-4000,‘110%‘], splitLine: { show: false }, max:function(obj){ var ma=obj.max; var mi=obj.min; var val=Math.ceil((ma+(ma-mi)/2)) return val }, min:function(obj){ var ma=obj.max; var mi=obj.min; var val=Math.ceil((mi-(ma-mi)/2)); if(val<0){ val=mi>0?0:val; } return mi==0?0:val } }, grid:{ height:‘60%‘//圖表的高度 }, dataZoom: [ { type: ‘slider‘,//數據滑塊 start:0, minSpan:8, //5min // minSpan:16, //10min // minSpan:24, //15min // minSpan:50, //30min dataBackground:{ lineStyle:{ color:‘#95BC2F‘ }, areaStyle:{ color:‘#95BC2F‘, opacity:1, } }, // fillerColor:‘rgba(255,255,255,.6)‘ }, { type:‘inside‘//使鼠標在圖表中時滾輪可用 } ], series: [{ name: ‘模擬數據‘, type: ‘line‘, showSymbol: false, hoverAnimation: false, data: resultArr }] }) } function initEc(id,op){ var color=[‘#0093F1‘,‘#45BF98‘,‘#F28D4E‘,‘#C1232B‘,‘#B5C334‘,‘#FCCE10‘, ‘#E87C25‘,‘#27727B‘,‘#FE8463‘,‘#9BCA63‘,‘#FAD860‘,‘#F3A43B‘,‘#60C0DD‘, ‘#D7504B‘,‘#C6E579‘,‘#F4E001‘,‘#F0805A‘,‘#26C0C0‘]; //var unit=unitList[$(‘#‘+id).prev(‘div‘).find(‘.bar-type dt.cur‘).attr(‘unit‘)]; var option = { color:color, tooltip: { trigger: ‘axis‘, axisPointer: { type: ‘cross‘, crossStyle: { color: ‘#999‘ } } }, calculable:true, toolbox: { right:‘10px‘, zlevel:600, z:600, feature: { dataView: {show: true, readOnly: false}, magicType: {show: true, type: [‘line‘, ‘bar‘,‘stack‘]}, restore: {show: true}, saveAsImage: {show: true} } }, grid:{ left:‘70px‘, right:‘70px‘, bottom:‘60px‘, //x:‘10%‘, //y2:‘13%‘,//距離最下面的邊距 }, legend: { data:[‘bar‘], }, calculable:true, noDataLoadingOption:{ //沒有數據時， effect: "bubble", text:"暫無數據", effectOption:{ effect:{ n:0 } }, textStyle:{ fontSize:32, fontWeight:‘bold‘ } }, xAxis: [ { type: ‘category‘, data:[], axisPointer: { type: ‘shadow‘ } } ], yAxis: [ { type: ‘value‘, //name:unit, name:"千瓦時", axisLabel: { formatter: ‘{value}‘ } } ], series: [{ name:‘bar‘, type:‘bar‘, data:[] }] }; var myChart = echarts.init(document.getElementById(id)); myChart.setOption($.extend({},option,op),true); myChart.resize(); } function loadPage(){ if($.query.get("groupName")==""||$.query.get("fileName")==""){ alert("groupName和fileName參數不能為空"); return; } serverData=$.loadConfig($.query.get("groupName"),$.query.get("fileName")+".js"); $(".context").attr(serverData.pageConfig); if(serverData.pageConfig.sizeType=="window"){//適應窗口大小 window.onresize=function(){ var scaleX=$(window).width()/$(".context").width(); var scaleY=$(window).height()/$(".context").height(); $(".context").css({"transform":"scale("+scaleX+","+scaleY+")","transform-origin":"0 0"}); } window.onresize(); }else{ $("html,body").css("overflow","auto"); } var energyCodes={} $(serverData.signs).each(function(i,d){ var sign=$(‘<div type="‘+d.type+‘" id="‘+d.type+‘_‘+new Date().getTime()+‘"></div>‘).appendTo($(".context")); if(d.echarts!=undefined){ d.echarts=echarts; } if(d.h337!=undefined){ d.h337=h337; } sign.createSign(d); if(d.url!=undefined&&d.url!=""){ sign.css("cursor","pointer");//設置有url的圖元鼠標為pointer } sign.refresh(); if(d.energycodes!=undefined){ $(JSON.parse(d.energycodes)).each(function(i,e){ energyCodes[e.code]=e.name; }) } }) $(".context .sign").removeAttr("active");//移除選擇 var codeStr=""; for(var code in energyCodes){ codeStr+=code+";"; } /*$.loadNewData({codes:codeStr,type:0});//首次獲取本頁面所關聯的所有能耗點的所有類型數據 setInterval(function(){ $.loadNewData({codes:codeStr});//每五秒更新一次實時數據 },5000);*/ $.post(‘/realTimeData/findWebSocketIpAndPortMS‘,{},function(data){ var websocketUrl=data.WebSocketIpAndPort; if(websocketUrl==""||websocketUrl==undefined){ console.error("服務器未返回ip"); return; } /**websock*/ /****************使用websoct獲取實時數據********************************/ var websocket = null; //判斷當前瀏覽器是否支持WebSocket if (‘WebSocket‘ in window) { websocket = new WebSocket(websocketUrl); } else { alert(‘當前瀏覽器 Not support websocket‘) } //連接發生錯誤的回調方法 websocket.onerror = function () { console.error("WebSocket連接發生錯誤"); }; //連接成功建立的回調方法 websocket.onopen = function () { socketsend({codes:codeStr,type:0}) console.info("WebSocket連接成功"); } //接收到消息的回調方法 websocket.onmessage = function (event) { if(event.data==""){return} var data=eval("("+event.data+")"); console.info(data); $(data.rows).each(function(){ var tag=this.sname if(window.energyData[tag]==undefined){ window.energyData[tag]={}; } for(var code in this){ window.energyData[tag][code]=this[code]; } //window.energyData[this.code]=this; }) } //連接關閉的回調方法 websocket.onclose = function () { console.info("WebSocket連接關閉"); } //監聽窗口關閉事件，當窗口關閉時，主動去關閉websocket連接，防止連接還沒斷開就關閉窗口，server端會拋異常。 window.onbeforeunload = function () { closeWebSocket(); } //將消息顯示在網頁上 function setMessageInnerHTML(innerHTML) { document.getElementById(‘message‘).innerHTML += innerHTML + ‘<br/>‘; } //關閉WebSocket連接 function closeWebSocket() { websocket.close(); } //發送消息 function socketsend(obj) { obj.interval=5; var _obj={}; console.log("發消息了！"); _obj.interval=5; //_obj.codes="yc_1;"; //console.log(_obj); websocket.send(JSON.stringify(obj)); } var historyType={}; $("[type=‘graph‘]").each(function(){ var graph=$(this); if(graph.attr("energyCodes")!=undefined){ var energyCodes=JSON.parse(graph.attr("energyCodes")); $(energyCodes).each(function(){ window.historyData[graph.attr("dataType")][this.code]=this.name; }) if(graph.attr("isShowLast")=="true"){ var lastCode="last"+graph.attr("dataType").charAt(0).toUpperCase()+graph.attr("dataType").substring(1); window.historyData[lastCode]=window.historyData[graph.attr("dataType")]; } } }) var params={}; for(var type in window.historyData){ params[type]=""; var typedata=window.historyData[type]; for(var code in typedata){ params[type]+=code+";" } } var list=$.loadHistoryData(params); var data=[] while(data.length<60){ data.push(""); } for(var type in list){ window.historyData[type]={}; $(list[type]).each(function(){ if(window.historyData[type][this.code]==undefined){ window.historyData[type][this.code]=$.extend(true, [], data); } window.historyData[type][this.code]=this.data; }) } $("[type=‘graph‘]").each(function(){ $(this).refresh(); }) }) } /** * 傳入一個日期的天數，往前面減day天，得到數組 */ function getSubSeven(sDate,day){ var arr=[]; var sTime=new Date(sDate).getTime(); var subTime=sTime-(86400000*day) for(var i=sTime;i>subTime;i-=86400000){ arr.push(dateTransform(i)); } return arr; } function dateTransform(time){ var _time=new Date(time); str=_time.getFullYear()+"-"+add0(_time.getMonth()+1)+"-"+add0(_time.getDate()); return str; } });View Code
web端網頁適配移動端註意事項，以及遇到的問題