移动应用web适配开发过程中遇到的问题记录
最近在做移动应用相关的web支持，遇到了一些问题，特此记录下来。
1.通过js判断设备宽度，做不同的适配
(function(){ var UA=window.navigator.userAgent, detectStyle='<style type="text/css">@media (max-width: 480px) {#MobileDetect {color: rgb(12, 34, 56)}}</style>', detectDiv='<div id="MobileDetect"></div>'; if(/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile/.test(UA)){ var style=createElement(detectStyle), div=createElement(detectDiv); document.head.appendChild(style); document.head.appendChild(div); init(getStyle(div,"color")==='rgb(12, 34, 56)'); style.remove(); div.remove(); }else{ init(false); } function init(flag){ if(!window.zDevice) window.zDevice={}; if(flag){ window.isMobile=true; window.zDevice.isSmallScreen=true; } } function getStyle(oElm,strCssRule){ var strValue=""; if(document.defaultView&&document.defaultView.getComputedStyle){ strValue=document.defaultView.getComputedStyle(oElm,"").getPropertyValue(strCssRule); }else if(oElm.currentStyle){ strCssRule=strCssRule.replace(/\-(\w)/g,function(strMatch,p1){return p1.toUpperCase();});strValue=oElm.currentStyle[strCssRule]; } return strValue; } function createElement(string){ var elem=document.createElement("div"); elem.innerHTML=string; return elem.childNodes[0]; } })();
在页面应用上面的js，然后根据需要在做相关的判断，例如根据屏幕的宽度引入不同的样式
<html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <script type="text/javascript" src="device.js"></script> <script type="text/javascript"> (function () { var link = document.createElement('link'); link.rel = 'stylesheet'; if (zDevice.isSmallScreen) { link.href = '/css/download320.css'; } else { link.href = '/css/download640.css'; } document.getElementsByTagName('head')[0].appendChild(link); })(); </script> </head>
2.后台通过userAgent判断是否是移动设备
3.分享到微信后，由于微信可以调整字体大小，分享过去的文章由于字体放大页面边乱。解决办法，在页面加入样式：
body{-webkit-touch-callout: none; -webkit-text-size-adjust: none;}
4.微信中的下载连接点击没有反应。例如我们的下载连接为：<a href="a.apk">下载</a>，可通过在下载连接后加上#mp.weixin.qq.com解决
<a href="a.apk#mp.weixin.qq.com">下载</a>
5.如何判断是从微信过来的连接。一种办法是通过在分享到微信的链接地址上加上标识参数；另一种方式通过判断userAgent，java代码判断如下：
request.getHeader("user-agent").indexOf("micromessenger") != -1
6.分享到微信问题Android有些手机下载后通过状态栏点击apk文件提示无法安装，在tomcat conf目录下的web.xml加入apk类型的支持
<mime-mapping>
<extension>apk</extension>
<mime-type>application/vnd.android.package-archive</mime-type>
</mime-mapping>
