我是作为一个H5移动端开发。主要是做跨平台兼容ios系统和Android系统。

在移动端中,最让我头疼的不是功能,不是业务逻辑。而是适配。俗话说:移动端适配是最头疼的事情,也是头发掉得最快的时候。

我在移动端开发中遇到很多坑。主要是发生在适配ios系统中,无论从页面布局还是插件的使用,ios 感觉有些独特。

我写移动端主要是应用两种框架H5+ 还有cordova。前端我主要是用的vue.js

今天呢,我来总结一下,无论ios 还是Android 系统适配某些插件使用出现的问题和解决办法。

先从页面说起:

(一)。去除ios 和Android 去除页面内容的复制和和input的可以复制和粘贴

* {
-webkit-touch-callout: none;
/*系统默认菜单被禁用*/
-webkit-user-select: none;
/*webkit浏览器*/
-khtml-user-select: none;
/*早期浏览器*/
-moz-user-select: none;
/*火狐*/
-ms-user-select: none;
/*IE10*/
user-select: none;
}
input {
-webkit-touch-callout: auto;
/*系统默认菜单被禁用*/
-webkit-user-select: auto;
/*webkit浏览器*/
-khtml-user-select: auto;
/*早期浏览器*/
-moz-user-select: auto;
/*火狐*/
-ms-user-select: auto;
/*IE10*/
user-select: auto;
}

(二)。在ios中遇到一串数字可拨打的限制

<meta name="format-detection" content="telephone=no" />

(三)。在iphoneX中页面布局的问题。头部和底部,头部一般是ios原生来搞定的,底部的距离一般是这样控制就ok

body {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
// overflow: hidden;
}

(四)。在cordova项目中,在海报合成的时候,使用html2canvas中。图片合成不出来(也就是base64)不能展示的图片跨域污染的问题。图片是要用网络图片。不能用本地图片。合成海报用到了qrcodes和html2Canvas技术,成功前端合成海报。

以后不需要后端来合成啦

 <div class="box_1" ref="box_1">
<img
src="http://xxxx/xx.png"
style="width:100%; height:100%" crossOrigin="anonymous"
>
<qrcodes
id="rqrcodes" :value="qrcodeUrl" v-if="qrcodeUrl" :options="{ size: 170 }"/>
                                    </div>
 html2canvas(that.$refs.box_1,{
useCORS: true
}).then(canvas => {
that.imgUrl_1 = canvas.toDataURL("image/png");
});

  

(五)。在ios中复制粘贴链接的问题。

//执行浏览器复制命令
copyHandle(message) {
var input = document.createElement("input");
            input.value = message;
            document.body.appendChild(input);
            input.select();
            input.setSelectionRange(0, input.value.length), document.execCommand('Copy');
            document.body.removeChild(input);
            this.$toast("复制成功");
},

  

(六)。在H5中,IOS11以上系统会出现吊起键盘之后,失去焦点,页面整体上滑的情况。

blurClick() {
var currentPosition, timer;
var speed = 1; //页面滚动距离
timer = setInterval(function() {
currentPosition =
document.documentElement.scrollTop ||
document.body.scrollTop;
currentPosition -= speed;
window.scrollTo(0, currentPosition); //页面向上滚动
currentPosition += speed; //speed变量
window.scrollTo(0, currentPosition); //页面向下滚动
clearInterval(timer);
}, 1);
},

(七)。压缩图片上传。先转化base64,然后在在转bold。重点是压缩图片。上代码

 var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
var base64 = canvas.toDataURL("image/jpeg", 0.6);

哈哈,暂时这么多了。大部分都是从网上摘下来的。但是这些效果都不错。总结一下。分享一下。希望大家看到的,对你们有点用处。  

我遇到移动端ios系统遇到的一些坑和解决办法的更多相关文章

  1. [移动端] IOS下border-image不起作用的解决办法

    上周五突然接到现场的一个需求,做一个移动端的劳模展示页面.现场美工把原型图发了过来.这个样子的: 说实在的很想吐槽一下我们美工的审美哈,不过这不是重点. 因为边框是需要特殊花纹的所以打算用border ...

  2. [转载]常见的移动端H5页面开发遇到的坑和解决办法

    转过来,平时看看.虽然还有很多问题至今无解.比如:华为麒麟950的P8和meta打开我们的应用首页经常偶发白屏.!! 1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是 ...

  3. 常见的移动端H5页面开发遇到的坑和解决办法

    转过来,平时看看.虽然还有很多问题至今无解.比如:华为麒麟950的P8和meta打开我们的应用首页经常偶发白屏.!! 1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是 ...

  4. MySQL安装过程net start mysql 启动失败 报“错误2,系统找不到文件”的解决办法

    MySQL安装过程net start mysql 启动失败 报“错误2,系统找不到文件”的解决办法 错误2,系统找不到文件. 开始...运行... regedit  注册表项: HKEY_LOCAL_ ...

  5. ios移动端部分手机不支持background-attachment: fixed 的解决办法

    ios系统和某些移动端background-attachment:fixed不兼容性,没有任何效果,但可以hack一下就可以了,代码如下: ps:想在哪个标签加背景,可以在它class后:before ...

  6. Windows 10 技术预览版9926 “未知源”引起系统休眠后自启的解决办法

    问题的由来: 自从安装上了最新发布的Windows 10 ,使用起来有诸多的改进:无论是重绘的图标还是通知消息中心的整合还是更智能的OneDrive客户端都使得工作起来非常愉悦. 不过笔者这两天频繁遇 ...

  7. Linux下因为系统编码问题造成乱码的解决办法

    2016年12月13日18:34:32 -------------------------------- 最近一段时间遇到一些润乾报表的应用在linux系统下面乱码的问题,最后检查后都发现是客户的li ...

  8. iOS Safari 中点击事件失效的解决办法

    问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效. ...

  9. IOS支付宝支付出现6002问题的解决办法

    运行支付宝官方demo进行支付测试,会出现6002-网络连接错误,是因为以iOS9 SDK编译的工程会默认以SSL安全协议进行网络传输,即HTTPS,如果依然使用HTTP协议请求网络会报系统异常并中断 ...

随机推荐

  1. linux虚拟机快照

    目录 一:虚拟机快照 一:虚拟机快照 1.什么是快照? 快照可保存虚拟机在特定时刻的状态和数据. 状态包括虚拟机的电源状态(列如,打开电源,关闭电源,挂起). 数据包括组成虚拟机的所有文件,这包括磁盘 ...

  2. 【Azure Developer】使用 Azure Python SDK时,遇见 The resource principal named https://management.azure.com was not found in the tenant China Azure问题的解决办法

    问题描述 在使用Python SDK时候,登录到China Azure (Mooncake)并访问AlertsManagement资源时候,时常遇见  EnvironmentCredential: A ...

  3. 推荐召回--基于内容的召回:Content Based

    目录 1. 前言 2. 构建画像 3. 内容召回的算法 1. 前言 在之前总结过协同过滤的召回通路后,今天我们来总结下召回策略中的重头戏:基于内容的召回通路,也即我们常说的基于标签的召回.这里就要涉及 ...

  4. AWS 模拟题知识点总结!

    一 题库的地址 https://www.lleicloud.com/index.php/aws-certified-saa-c01-practice-questions-c6-01/ 二 总结的知识点 ...

  5. python--003 数据类型

    运算符 in "heilo" in "adfsdfsdfsdfsdfdsfdshellofsdfdsf" "li"  in ["l ...

  6. Windows点击更改适配器选项出现的网络连接为空

    前言:windows出现点击更改适配器选项出现的网络连接为空,一直找了很久,没有找到方法 解决方案: 1:点击状态: 2:点击网络重置 最后:电脑进行重启,即可.

  7. Android Studio中添加对HttpClient的支持包

    感谢大佬:https://blog.csdn.net/gladiator0975/article/details/49177959 sdk6.0以后取消了HttpClient,设置android SD ...

  8. CSS布局居中

    1.把margin设置为auto,此方法只能进行水平的居中,且对浮动元素或绝对定位元素无效.

  9. 自定义带图片和文字的Button的排版--陈棚

    自定义button,动态加载图片与文字 [footView addSubview:btnAllChoose]; [btnAllChoose setTitle:str forState:UIContro ...

  10. DNS域名解析之反向解析and主从域名服务器 (今天大小便正常,未来可期)

    DNS解析之反向解析和域名主从服务器 反向解析:根据IP地址查找对应的域名 yum -y install bind 安装软件包 查看需要修改的配置文件所在路径 rpm -qc bind 查询bind软 ...