移动端开发中遇到的坑点及总结(持续更新)_移动端开发实战

移动端开发中遇到的坑点及总结

前言

前言

本文主要是记录自己在移动端开发中遇到的一些坑点或者总结（持续更新，有新的坑点会总结进来）

一、new Date（）在IOS上出现值为NAN的问题

我们常用new Date()去获取时间戳，例如

new Date("2017-08-11 12:00:00");

但在IOS下，这是使用获取到的值是NAN。
原因：因为IOS下的new Date()不支持"-“这个字符
解决方法：把”-“改成‘”/"就可以了。例如

new Date("2017-08-11 12:00:00".replace(/-/g, "/"));

二、Android部分机型使用height和line-height等值设置垂直居中，但会显示偏高的问题

在开发过程中，我们想让文字进行垂直居中时，往往会设置height和line-height等值来实现。这种方式在PC端看到的时候没有问题，但在真机上测试时，会发现部分Android机型会出现文字偏高的问题。
原因：貌似是有部分Android机型有自己默认的line-height，我们额外设置的line-height不起作用。
解决办法：设置line-height：normal，再通过padding去设置居中就可以了。

line-height：normal; padding:xxpx 0;

三、IOS下的H5页面会把数字识别成电话号码

在我们的页面中，难免会存在有数字串的存在。在真机上测试时，Android是没问题的，但在IOS中，却会将数字识别成电话号码，有时候我们如果对a标签进行了全局样式的修改，还会影响到我们的布局。
原因：这是IOS采用Safari浏览器内核的原因，会在数字串加上a标签，并且在a标签里添加属性值tel
解决办法：在head里面添加如下mate标签就可以了。

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

四、IOS的输入框，光标会很大

在真机上测试时，Android是没问题的，但在IOS中，输入框的光标会很大
原因：这是因为没有设置line-height，光标默认取了输入框的高度
解决办法：设置line-height就好了，如果不够高

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

五、页面有弹窗，弹窗出现的时候，底部内容仍可滑动。

在开发过程中，难免会存在以下这种情况：页面本身可滚动，并且有弹窗可以触发出现。
在PC端，按照我们正常地去设置弹窗的显示/隐藏是没问题的，但真机测试的时候会发现，当弹窗出现时，底部的内容可以上下滑动，即使设置了弹窗的z-index也没解决，这样体验性不是很好。
原因：不详（望大佬告知）
解决办法一：我们可以在弹窗出现时，将底部的页面设置成overflow：hidden，在弹窗消失时再设成overflow：auto或者overflow：scroll就好了

假设底层是#root(jq写法) // 弹窗show时： $('#root').css('overflow','hidden') // 弹窗hide时： $('#root').css('overflow','auto')

这个方法可以解决，但不适用于部分情况，当我们往下滑动再触发显示弹窗时，我们关闭弹窗后会发现，页面突然跳到了最顶部，这是不太友好的地方。所以可以参考解决方法二：

解决办法二：我们可以对弹窗的滑动事件的默认行为进行禁用，利用e.preventDefault()

假设弹窗是#modal(jq写法) $('#modal').on('touchmove',(e) => { 
    e.preventDefault() },false)

六、iphone的H5页面click点击事件不生效

在移动端端开发中，点击事件我们通常可以用touch和click来触发，当我们使用以下的绑定事件写法去定义一个click事件时，会发现在Android下是没问题的，但在ios某些机型下，事件没有生效。

$(document).on('click','selector',function(){ 
    // 事件 });

cursor: pointer

解决办法二：将document换成绑定元素的父元素

$(selector的父元素).on('click','selector',function(){ 
    // 事件 });

七、代码书写规范

移动端开发，如果使用的是JQ进行开发的话，在JS文件上，可以对代码进行分功能模块书写，这样可以让代码显示层次分明，清晰点。下面分享下我的一个常用写法：

$(function() { 
    var App = (function(obj) { 
    obj.Common = { 
    // FUNC1 FUNC1() { 
    // 内容 }, // FUNC2 FUNC2() { 
    // 内容 }, // 初始化 init: function() { 
    var that = this; that.FUNC1(); that.FUNC2(); } }; return obj; })(App || { 
   }); App.Common.init(); });

七、ajax()关于请求超时和同异步的处理

在使用JQ进行移动端开发时，我们大都会用到JQ的ajax()去进行数据的请求。正常的写法是这样的：

$.ajax({ 
    type: 'POST', url: url, headers: headers, data: data, dataType: 'json', success: function(res) { 
    // 对数据进行处理 } })

这样写时可以满足我们正常的需求，这里补充ajax()可能不太常用的点，就是这个timeout和async，可以用来处理请求超时和异步转同步的情况：

var ajaxTimeout = $.ajax({ 
    type: 'GET', url: url, headers: headers, data:data, dataType: 'json', async:false, //设为同步 timeout: 15000, //超时时间设置，单位毫秒 success: function(res) { 
    // 对数据进行处理 }, error: function(err) { 
    // 对服务器请求错误进行处理 }, complete: function(XMLHttpRequest, status) { 
    //请求完成后最终执行参数 if (status === 'timeout') { 
    //超时处理 } } })

八、设置rem

我们做移动端开发时，为了兼容性，大多数情况下是使用rem进行开发，而很少用px进行开发，以下是rem的设置文件，copy保存在一个js文件中，然后在页面引入这个js文件就可以使用了

(function(doc, win) { 
    var docEl = doc.documentElement, isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1, dpr = window.top === window.self ? dpr: 1, //被iframe引用时，禁止缩放 dpr = 1, scale = 1 / dpr, resizeEvt = 'orientationchange' in window ? 'orientationchange': 'resize'; docEl.dataset.dpr = dpr; var metaEl = doc.createElement('meta'); metaEl.name = 'viewport'; metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale; docEl.firstElementChild.appendChild(metaEl); var recalc = function() { 
    var width = docEl.clientWidth; if (width / dpr > 750) { 
    width = 750 * dpr; } // 乘以100，px : rem = 100 : 1 docEl.style.fontSize = 100 * (width / 750) + 'px'; }; recalc() if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); })(document, window);

px就是像素，这个没什么好说的
em是指根据父元素来进行设置大小，如果父元素的font-size：16px，那子元素设置font-size：2em，就相当于设置了font-size：32px
rem和em类似，只不过多了root，即是根据root的字体大小进行设置的。

到此这篇移动端开发中遇到的坑点及总结(持续更新)_移动端开发实战的文章就介绍到这了,更多相关移动端开发中遇到的坑点及总结(持续更新)_移动端开发实战内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

上一篇：移动端开发适配方案

下一篇：移动端开发——[12]

版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/ydkf/3380.html