扣丁学堂浅谈HTML5与APP混合开发遇到的问题(二)

2018-04-27 11:03:02 683浏览

我们上篇文章已经和大家分享了一些扣丁学堂HTML5在线学习视频教程讲解的关于HTML5与APP混合开发遇到的问题及解决方法，本篇文章小编继续带大家看一些常见的问题及解决方法。

问题4:移动端1px的问题

 

问题描述：

 

由于不同的手机有不同的像素密度,css中的1px并不等于移动设备的1px。项目中使用js和rem做移动端的屏幕适配，所以产生0.5px的情况，导致低版本的手机展示不了0.5px的边框。

 

解决方法：

 

使用css解决1px的问题，并且给需要设置成1px的dom元素直接写上：border-width:1px;

 

代码：

 

//HTML部分：
<divclass='class1'></div>

//css部分：
.class1{
border:1pxsolid#ccc;
}

//css部分
/*移动端正常展示1px的问题start*/
%border-1px{
display:block;
position:absolute;
left:0;
width:100%;
content:'';
}
.border-1px{
position:relative;
&::after{
@extend%border-1px;
bottom:0;
border-top:1pxsolid#ccc;
}
&::before{
@extend%border-1px;
top:0;
border-bottom:1pxsolid#ccc;
}
}
@media(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){
.border-1px{
&::after{
-webkit-transform:scaleY(0.7);
transform:scaleY(0.7);
}
}
}
@media(-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
.border-1px{
&::after{
-webkit-transform:scaleY(0.5);
transform:scaleY(0.5);
}
}
}
/*移动端正常展示1px的问题end*/ 

问题5：js无法正确解析到url包含"="号的参数值

 

问题描述：

 

项目中，由于数据请求的参数值是从url地址中获取的参数值，并且参数值包含"="号，导致无法正确解析到参数值(ps:js使用"="号分割url的参数)

 

解决方法：

 

将url进行转码，再解码【本项目中，APP端提供转码后的url地址，前端使用geturlparams插件，获得url地址的参数值】

 

代码：

 

//解码"="号
dom.token=decodeURI($.query.get("token"));//插件
//获取无需解码的值
dom.msgid=$.query.get("msgid");

 

问题6：原生js的事件监听和jquery的事件绑定在ios中失效

 

问题描述：

 

使用事件监听或事件绑定时，由于父元素选择body或document元素，导致在ios中事件触发无效

 

解决方法：

 

不使用body和document元素作为父级元素

 

问题7：ios中日期显示为NaN

 

问题描述：

 

Date的日期格式，在ios中有兼容性问题，ios的日期会显示成：NaN

 

解决方法：

 

解决方法：在ios中支持"2017/12/2619:36:00"，而不支持"2017-12-2619:36:00"格式，后面一种格式，在ios中显示Nan（Android中都可以显示正常）

 

代码：

 

vartime="2017-12-2619:36:00";
time=time.replace(/\-/g,"/");//将时间格式的'-'转成'/'形式，兼容iOS 

问题8：click事件在ios中有问题

 

问题描述：

 

click事件在ios点击触发时，会选中事件委托的父级元素模块【即：由于事件冒泡，并且父级有默认样式】，并且有一个透明层，例如：

 

<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul> 

解析：例如ios用户点击"列表项1"时，父层的ul会有一个透明的样式。

    关于HTML5与APP混合开发遇到的问题小编就为大家说到这里了，想要了解更多内容的小伙伴可以登录扣丁学堂官网查询。扣丁学堂是专业的HTML5培训机构，不仅有专业的老师和与时俱进的课程体系，还有大量的HTML5在线视频供学员观看学习哦。扣丁学堂H5技术交流群：559883758。

【关注微信公众号获取更多学习资料】

查看更多关于“HTML5开发技术资讯”的相关文章>>