需求:
实现思路:
2.修改以layout开头的布局元素的样式
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" valign="top" style="background-image:url(img/1.png);background-repeat:no-repeat;"> <tr> <td> <table width="100%" border="0" cellspacing="0" cellpadding="0" valign="top" > <tr id = 'paramPanelTr'> <td width="100%" colspan="2" align="center" bofid='paramPanel'></td> </tr> </table></td> </tr> <tr height="100%"> <td> <div class="_viewdiv" id='_viewdiv_' style="width: 100%; height: 100%; left: 0px; top: 0px; overflow: auto;"> <table width="100%" height="100%" cellspacing="0" cellpadding="0" valign="top" > <tr height="100%"> <td width=100% valign="top" bofid="layout0" class="layout_0"></td> <td width=100% valign="top" bofid="layout1" class="layout_1"></td> <td width=100% valign="top" bofid="layout2" class="layout_2"></td> </tr> </table> </div></td> </tr> </table> <script type="text/javascript"> var domutils = jsloader.resolve("freequery.lang.domutils"); var isMobile = domutils.isMobile(); //添加设备判断,避免固定定位对PC端显示造成影响 if(isMobile){ $(".layout_0").css({ "width":"100%", "height": "54px", "position":"fixed", "left":0, "top": 0, "z-index":2, "background":"#FFFFFF" }); $(".layout_1").css({ "width":"100%", "height":"auto", "position":"absolute", "left":0, "top": "54px", "z-index":1 }); $(".layout_2").css({ "width":"100%", "height":"51px", "position":"fixed", "left":0, "bottom": "-5px", "z-index":2, //通过背景色实现两边充满 "background":"#0E63AF" }); } </script> |
3.Android APP上查看效果