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

移动端开发中遇到的坑点及总结(持续更新)前端在移动端开发中遇到的坑点前言一、newDate()在IOS上出现值为NAN的问题二、移动端中input中的文字使用height和line-height等值,文字居中但光标不居中的问题前言本文主要是记录自己在移动端开发中遇到的一些坑点(持续更新)一、newDate()在IOS上出现值为NAN的问题我们常用newDate()去获取时间戳,例如newDate(“2017-08-11…

大家好,又见面了,我是你们的朋友全栈君。

前言

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

一、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">

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

在开发过程中,难免会存在以下这种情况:页面本身可滚动,并且有弹窗可以触发出现。
在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(){ 
   
	// 事件
});

**原因:不详(望大佬告知)
解决办法一:**在需要绑定事件的selector元素上,加上这样的css属性

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()可能不太常用的点,就是这个timeoutasync,可以用来处理请求超时和异步转同步的情况:

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);

例如我们平时设置width:100px,引入js文件后,就只需要设置width:1rem就好。
这里额外说明下rem,px,em这三个单位的区别:

  1. px就是像素,这个没什么好说的
  2. em是指根据父元素来进行设置大小,如果父元素的font-size:16px,那子元素设置font-size:2em,就相当于设置了font-size:32px
  3. rem和em类似,只不过多了root,即是根据root的字体大小进行设置的。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/152739.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • QT 播放器之界面布局[通俗易懂]

    QT 播放器之界面布局[通俗易懂]第一步。。。当然是创建项目啦然后修改项目的名称,接着找一个自己喜欢的文件夹藏着。记得路径不能有中文,当然项目名称也不能有中文之后一直下一步直到完成,来到该界面后双击ui文件去布局右键把菜单栏,工具栏,状态栏去除先把控件摆好,之后再修改名字设置按钮的最大尺寸设置centralWidget布局成右边这样最后修改控件的对象名称…

  • 两地三中心架构[通俗易懂]

    两地三中心架构[通俗易懂]转载自:http://blog.csdn.net/Love_Taylor/article/details/73603672

  • Git远程仓库(2)

    Git远程仓库(2)

  • IsoAlgo3d – A PCF 3D Viewer for Desktop, Tablet and Smart phone

    IsoAlgo3d – A PCF 3D Viewer for Desktop, Tablet and Smart phone

  • 【Android】Broadcasts详解

    【Android】Broadcasts详解Android应用程序可以发送广播,也可以接收Android系统或者其它应用发出的广播,这跟发布-订阅设计模式很相似。当一些受到关心的事件发生后,广播会被自动发送。举例来说,当一些系统事件(如开机,设备开始充电等)发生,Android系统会发送广播。应用程序也可以发送自定义的广播,比如当某个应用关注的事件(如数据更新等)发生后可以发送广播提醒它。系统广播当一系列系统事件发生的时候,系统会自动发送广播

  • Plc编程入门基础知识,在短时间内如何学会编程[通俗易懂]

    Plc编程入门基础知识,在短时间内如何学会编程[通俗易懂]Plc编程入门基础知识,在短时间内如何学会编程PLC:可编程逻辑控制器。实质是一种专用于工业控制的计算机,其硬件结构基本上与微型计算机相同,基本组成如下图所示:工业生产和科技的发展都离不开plc的自动化控制,作为一名电工,想要不被时代所抛弃,就要不断充实自己、投资自己、学习PLC。那么电工学习PLC该如何入门呢?我是一个自动化行业职业计划者。给初学者略略总结一下,希望对你有所帮助。1选择学习的类型市场的主流plc有三菱,西门子,欧姆龙等等,我推荐先学习三菱,西门子基本上了解这两种,不愁没饭吃2从基

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号