首页 > 代码库 > 混合开发中那些坑(一)

混合开发中那些坑(一)

1、沉浸式标题

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

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

  // 动态加载css文件

function loadUfsStyles(url) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = http://www.mamicode.com/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、

混合开发中那些坑(一)