移动应用web适配开发过程中遇到的问题记录

2021-12-15 03:51:30

最近在做移动应用相关的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>

移动应用web适配开发过程中遇到的问题记录,布布扣,bubuko.com

移动应用web适配开发过程中遇到的问题记录

码农公寓

相关文章