页面遇到的APP兼容性问题合集

原创已于 2022-11-24 16:55:15 修改 · 置顶 · 1.8k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#兼容性

于 2021-04-13 15:37:23 首次发布

本文介绍了在移动端开发中遇到的三个常见问题：1) iOS设备上window.open无法跳转链接；2) iOS系统中按钮点击无响应；3) 安卓内H5页面文字颜色显示异常。针对这些问题，提出了相应的解决策略：使用navigator.userAgent判断设备类型以调整跳转方式；为iOS按钮添加'cursor:pointer'样式；确保CSS颜色代码规范，避免颜色设置失效。这些解决方案有助于提升移动端应用的兼容性和用户体验。

1.移动端使用window.open跳转链接时，苹果iOS没有反应的问题，安卓手机很正常，也不报错

解决方案如下：

移动端使用window.open跳转链接时安卓可以正常跳转，但是iOS苹果上没有反应，百度了下说是因为苹果的安全机制拦截了，所以不能打开新的标签页，然后就使用了网上的方法：

var u = navigator.userAgent;
var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

 function(){
    $.ajax({
        type: '',
        url: '',
        data: '',
        ......
        success:function(res){
            if(isAndroid) {  //android终端
				let url = res.data.url;
				window.open(url);
			}else if(isiOS) {   //ios终端
				window.locaton.href = res.data.url;
			}
        }
    });
};