关于移动端开发的一些处理方案

最新推荐文章于 2024-07-18 16:24:01 发布

GrowthHacker

最新推荐文章于 2024-07-18 16:24:01 发布

阅读量364

点赞数

分类专栏：前端技术知识

本文链接：https://blog.csdn.net/tinsine/article/details/85053260

版权

前端技术知识专栏收录该内容

22 篇文章 1 订阅

订阅专栏

ios双击页面滑动的问题解决方案

以下js是屏蔽ios原生双击时间的代码，亲测可用

(function () {
   var agent = navigator.userAgent.toLowerCase();
   var iLastTouch = null; //缓存上一次tap的时间
   if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0) { //检测是否是ios
     document.body.addEventListener('touchend', function(event) {
       var iNow = new Date().getTime();
       iLastTouch = iLastTouch || iNow + 1 /** 第一次时将iLastTouch设为当前时间+1 */ ;
       var delta = iNow - iLastTouch;
       if (delta < 500 && delta > 0) {
         event.preventDefault();
         return false;
       }
       iLastTouch = iNow;
     }, false);
   }
 })();

移动端`font-size`的适配方案

(function () {
	var baseFontSize = 100;
	var baseWidth = 1920;
	var set = function () {
		var clientWidth = document.documentElement.clientWidth || window.innerWidth;
		var rem = 100;
		if (clientWidth != baseWidth) {
			rem = Math.floor(clientWidth / baseWidth * baseFontSize);
		}
		document.querySelector('html').style.fontSize = rem + 'px';
	}
	set();
	window.addEventListener('resize', set);
}());