混合开发中那些坑

Posted 2020-09-07

1、沉浸式标题

　　对于安卓和ios来说，解决沉浸式标题的方法不一样，通过打包设定，ios可以完美解决沉浸式问题，而安卓就会在head部分多出来一个标题栏的高度，非常恶心。

　　解决办法：通过js判断设备类型

　　// 动态加载css文件

function loadUfsStyles(url) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}

// 判断是否为iso系统
function isIos(){
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){
return true;
}
return false;
}

// 如果为苹果则加载css文件
function loadIosStyles (url) {
if(isIos()){
loadUfsStyles(url);
}
}

loadIosStyles("../css/ios.css");

2、移动端自带滚动条问题

　　解决方法：去掉即可

　　

　　/*隐藏滚动条*/

::-webkit-scrollbar {
display: none;
}

3、图标大小不统一

　　解决方法：从UI入手，不要直接从阿里的iconfont库里直接拼凑下载不同的图标，跟UI沟通，直接制作一套自己的项目的图标，做到从视觉上等边距，然后导出来就行了。

4、