移动端常见的一些问题(版权归妙味所有，仅搬运转载)

最新推荐文章于 2018-06-04 11:20:58 发布
最新推荐文章于 2018-06-04 11:20:58 发布
阅读量718 收藏 3
点赞数
分类专栏： javascript

事件点透是怎么回事？

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,user-scalable=no" />
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box {
	position: absolute;
	left: 0;
	top: 0;
	width: 200px;
	height: 200px;
	background: red;
	opacity: .5;
}
</style>
</head>
<body>
<a href="http://www.miaov.com">妙味课堂</a>
<div id="box"></div>	
<script type="text/javascript">
/*
	移动端支持鼠标事件，但是会有300ms的延迟
	事件点透:
		当我们在屏幕按下时，会直接执行touch事件，然后延迟300ms，在点击的这个坐标点查找元素，如果元素有鼠标事件就执行
		解决：
			e.preventDefault(); 	
*/
(function(){
	var box = document.querySelector('#box');
	box.addEventListener('touchend', function(e) {
		this.style.display = "none";
		e.preventDefault();
	});
})();	
</script>
</body>
</html>

如何在移动端兼容 requestAnimationFrame ？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title>Document</title>
<script type="text/javascript">
window.requestAnimationFrame = window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame;
window.cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||window.cancelRequestAnimationFrame||window.webkitCancelRequestAnimationFrame||window.mozCancelRequestAnimationFrame;
/*
	requestAnimationFrame
	webkitRequestAnimationFrame
	mozRequestAnimationFrame

	cancelAnimationFrame
	webkitCancelAnimationFrame
	mozCancelAnimationFrame

	cancelRequestAnimationFrame
	webkitCancelRequestAnimationFrame
	mozCancelRequestAnimationFrame
*/	
if(!requestAnimationFrame){ //如果浏览器不支持咱们的动画帧 这回我们就需要用定时器来兼容动画帧
	var lastTime = 0;
	window.requestAnimationFrame = function(fn){
		var timer = 0;
		var nowTime = Date.now();//获取当前时间
		var time = Math.max(16.7 - (nowTime - lastTime),0);
		timer = setTimeout(fn,time);
		lastTime = nowTime;
		return timer;
	};
}
if(!cancelAnimationFrame){
	window.cancelAnimationFrame = function(index){
		clearTimeout(index);
	};
}
</script>
<style type="text/css">
#box {
	width: 100px;
	height: 100px;
	background: red;
}	
</style>
</head>
<body>
<input type="button" value="停止" id="stop">
<div id="box"></div>
<script type="text/javascript">
var box = document.getElementById('box');
var stop = document.getElementById('stop');
var width = 100;
var timer = 0;
// box.addEventListener('click', move);	
// stop.addEventListener('touchend', function(e) {
// 	cancelAnimationFrame(timer);
// });
box.onclick = move;
stop.onclick = function(){
	cancelAnimationFrame(timer);
};
function move(){
	timer = window.requestAnimationFrame(toMove);
}
function toMove(){
	width += 2;
	box.style.width = width + "px";
	if(width < 300){
		timer = window.requestAnimationFrame(toMove);
	}
}
</script>
</body>
</html>

在移动端如何优化图片的渲染？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img data-src="img/avatar2.jpg" />
<script type="text/javascript">
(function(){
	var imgs = document.querySelectorAll('img');
	for(var i = 0; i < imgs.length; i++){
		createImg(imgs[i])
	}
	function createImg(img){//生成图片
		var newImg = new Image();
		newImg.src = img.dataset.src;
		newImg.onload = function(){
			var c = document.createElement("canvas");
			var cxt = c.getContext("2d");
			c.width = newImg.width;
			c.height = newImg.height;
			cxt.drawImage(newImg,0,0,newImg.width,newImg.height);
			img.parentNode.replaceChild(c,img);
		};
	}
})();	
</script>
</body>
</html>


在移动端怎么禁止苹果手机自带的上滑下拉，且不能禁止浏览器事件？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title>Document</title>
</head>
<body>
<ul class="list"></ul>
<script type="text/javascript">
/*
	判断什么时候才会触发到浏览器默认的下拉功能，
	然后在这个时候再阻止默认事件
		1. 滚动条的位置已经在0了
		2. 用户还在向下滑屏
*/
(function(){
	var lastPointY = 0;
	document.body.addEventListener('touchstart', function(e) {
		lastPointY = e.changedTouches[0].pageY;//按下时手指的坐标
	});
	document.body.addEventListener('touchmove', function(e) {
		var nowPointY = e.changedTouches[0].pageY;//手指移动时的坐标
		//e.preventDefault();
		if(nowPointY >= lastPointY && window.scrollY == 0){
			console.log("向下滑动");
			e.preventDefault();
		}
		lastPointY = nowPointY;
	});	
})();

(function(){
	var list = document.querySelector('.list');
	var inner = "";
	for(var i = 0; i < 50; i++){
		inner += '<li>这是第'+i+'个li</li>'
	}
	list.innerHTML = inner;
})();	
</script>
</body>
</html>

input type=”file ” multiple 调取移动端相机 兼容效果好吗？ 加个multiple属性不是应该有多个选择吗 如选择相机 图片 摄像头 为啥有的在浏览器里面直接打开相机了 怎么可以保持多种选择

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,user-scalable=no" />
<style type="text/css">
label {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -21px 0 0 -101px;
	width: 200px;
	height: 40px;
	border: 1px solid #000;
	text-align: center;
	font: 16px/40px "宋体";
}	
input {
	display: none;
}
</style>
</head>
<body>
<!--
	在各个机型都可以点击 file 调用相册 和 摄像头拍照
		1. 在老版本的安卓中，必须加上capture，否则只能调用相册
		2. 在新版本的部分安卓中 以及IOS中 加了capture，就只能调用摄像头不能调用相册

		解决办法:
			判断ios，如果是ios就去掉capture属性
-->
<label>上传图片
	<input type="file" id="file" accept="image/*" capture>
</label>
<script type="text/javascript">
(function(){
	var file = document.querySelector('#file');
	if(getIos()){
		file.removeAttribute("capture");
	}
})();
function getIos() {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/iPhone\sOS/i) == "iphone os") {
        return true;
    } else {
        return false;
    }
}	
</script>
</body>
</html>

移动端上传照片部分设备照片会旋转90度

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,user-scalable=no" />
</head>
<body>
<img src="DSCN0614_small.jpg" />
<script type="text/javascript" src="js/exif.js"></script>
<script type="text/javascript">
var img = document.querySelector('img');
EXIF.getData(img, function(){
	//console.log(EXIF.getAllTags(img));
	console.log(EXIF.getTag(img,"Orientation"));
});
</script>
</body>
</html>

解决安卓下点击了软键盘缩放之后，触发不了input的blur的问题


<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,user-scalable=no" />
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
	margin: 0;
}	
input {
	width: 100%;
	box-sizing: border-box;
	height: 50px;
	border: 2px solid #000;
}
input:focus {
	border-color: blue;
	box-shadow: 0 0 10px blue;
}
</style>
</head>
<body>
<input id="text" type="text" name="">
<div id="info"></div>
<script type="text/javascript">
(function(){
	var text = document.querySelector('#text');
	var info = document.querySelector('#info');
	text.onfocus = function(){
		// setInterval(function(){
		// 	// info.innerHTML += document.documentElement.clientHeight + "|<br/>";
		// },100);
		//软键盘的弹出 会影响窗口的大小发生改变
		// 展开是 改变一次，收缩起来又改变一次
		window.addEventListener('resize', toResize);
	};
	function toResize(){
		window.removeEventListener('resize', toResize);
		window.addEventListener('resize', toBlur);
	}
	function toBlur(){
		window.removeEventListener('resize', toBlur);
		text.blur();
	}
})();	
</script>
</body>
</html>

安卓下大面积触摸会触发touchmove的问题

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title>Document</title>
<!--
安卓下大面积触摸会触发touchmove的问题

滑屏误触，该怎么合理解决？

tap事件的封装
-->
<style type="text/css">
body {
	margin: 0;
}	
.box {
	margin: 50px 0;
	height: 100px;
	background: red;
}
</style>
</head>
<body>
<div class="page">
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
</div>	
<script type="text/javascript">
document.addEventListener('touchstart', function(e) {
	e.preventDefault();
});
(function(){
	var boxs = document.querySelectorAll('.box');
	/* 滑屏误触问题 */
	for(var i = 0; i < boxs.length; i++){
		// boxs[i].addEventListener('touchend', function(e){
			
		// });
		tap(boxs[i],function(){
			this.style.background = "blue";
		});
	}
	/* 解决方案：自己封装一个tap事件 */
})();
function tap(el,fn){
	/*
		点击事件的思路:
			当用户抬起手指时，判断用户有没有进行过滑动
			如果用户进行过滑动，就不算点击
			1) 声明变量记录用户是否进行滑动
			2）touchmove中记录用户进行了滑动
			3）touchend 对该变量进行判断

	*/
	var isMove = false;
	el.addEventListener('touchmove', function(e) {
		isMove = true;
	});
	el.addEventListener('touchend', function(e) {
		if(!isMove){
			fn&&fn.call(el,e);
		}
		isMove = false;
	});
}	
</script>
</body>
</html>

滑屏误触，该怎么合理解决？tap事件的封装

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title>Document</title>
<!--
安卓下大面积触摸会触发touchmove的问题

滑屏误触，该怎么合理解决？

tap事件的封装
-->
<style type="text/css">
body {
	margin: 0;
}	
.box {
	margin: 50px 0;
	height: 100px;
	background: red;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script type="text/javascript">
(function(){
	var boxs = document.querySelectorAll('.box');
	for(var i = 0; i < boxs.length; i++){
		tap(boxs[i],function(){
			this.style.background = "blue";
		});
	}
})();
function tap(el,fn){
	var startPoint = {};
	el.addEventListener('touchstart', function(e) {
		startPoint = {
			x: e.changedTouches[0].pageX,
			y: e.changedTouches[0].pageY
		};
	});
	el.addEventListener('touchend', function(e) {
		var nowPoint = {
			x: e.changedTouches[0].pageX,
			y: e.changedTouches[0].pageY
		};
		if(Math.abs(nowPoint.x - startPoint.x) < 5
		&&Math.abs(nowPoint.y - startPoint.y) < 5) {
			fn&&fn.call(el,e)
		}
	});
}
</script>

</body>


移动端输入框被遮挡了怎么办呢？

  
  

   
   
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,user-scalable=no" />
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
	margin: 0;
}	
body,
html {
	height: 100%;
}
.page {
	position: relative;
	height: 100%;
	background: #f1f1f1;
}
.text {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 40px;
	box-sizing: border-box;
}
.info {
	position: absolute;
	left: 0;
	bottom: 50px;
	width: 100%;
	height: 40px;
	background: #333;
	color: #fff;
}
</style>
</head>
<body>
<div class="page">
	<div class="info"></div>
	<input type="text" class="text" name="">
</div>
<script type="text/javascript" src="js/mTween.js"></script>
<script type="text/javascript">
(function(){
	var page = document.querySelector('.page');
	var text = document.querySelector('.text');
	var info = document.querySelector('.info');
	var old = 0;
	css(page,"translateY",0);
	/*
		移动端输入框被遮挡的问题
			1) 在软件盘弹出之后（在focus中加个延迟时间），获取input的坐标
			2) 判断input是否遮挡
				1. 判断 input 是否在 可视区的高度以下
			3) 如果被遮挡了 就向上移动整个页面
				1. 用被软件盘遮挡的距离 	

	*/
	text.addEventListener('focus', function(e) {
		setTimeout(function(){
			//延迟一段时间之后，才可以获取到软键盘弹出之后的坐标
			var rect = text.getBoundingClientRect();
			var h = document.documentElement.clientHeight; 
			old = css(page,"translateY");
			if(rect.bottom > h){
				//info.innerHTML = "被遮挡了";
				var dis = rect.bottom - h;
				css(page,"translateY", old - dis);
			}
		},1000);
	});
	text.addEventListener('blur', function(e) {
		old = css(page,"translateY",old);
	});
})();
</script>
</body>
</html>



  
  


  
  


   
   

移动端 怎么固定横屏显示？


  
  


  
  

   
   
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,user-scalable=no" />
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,
html {
	margin: 0;
	height: 100%;
}
.page {
	position: relative;
	height: 100%;
}
.div {
	position: absolute;
	background: #000;
	text-align: center;
	font-size: 50px;
	color: #fff;
}
</style>
</head>
<body>
<div class="page">
	<div class="div">我要横屏显示</div>
</div>
<script type="text/javascript" src="js/mTween.js"></script>
<script type="text/javascript">
(function(){
	toChange();
	window.addEventListener('orientationchange',toChange);
	function toChange(){
		var page = document.querySelector('.page');
		var div = document.querySelector('.div');
		console.log(page.clientWidth,page.clientHeight);
		var w = Math.max(page.clientWidth,page.clientHeight);
		var h = Math.min(page.clientWidth,page.clientHeight);
		/* 让div和page的大小一样 并且 中心点对齐*/
		div.style.width = w + "px";
		div.style.height = h + "px";
		div.style.left = (page.clientWidth - w)/2 + "px";
		div.style.top = (page.clientHeight - h)/2 + "px";
		/* 判断 当前是竖屏还是 竖屏 然后给内容一个旋转值 */
		//alert(window.orientation); 横屏 90 -90  竖屏 0 180
		if(window.orientation == 90 || window.orientation == -90){
			css(div,"rotate",0);
		} else if(window.orientation == 0 || window.orientation == 180){
			css(div,"rotate",90);
		}

	}
})();	
</script>
</body>
</html>

   
   


   
   


  
  




  
  


 


                

        

        

    




    

      

        

            

              
                
                  montaellis
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    3
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
移动端Web开发

				
			

			

				

					09-23
				

			

		

		

			
				
HTML5是移动端开发最常用的技术，熟悉HTML5新标签和Api以及CSS3的新的Api，可以使你的网页更加的绚丽多彩，并且开发出你意想不到的网页效果。学完此课程，你编写的代码就可以移动设备上完美兼容啦。

			
		

	



                

              
                



	

		

			

				
					
移动端底部版权信息被软键盘顶上去遮盖输入框的问题

				
			

			

				

					一叶青果的博客
				

				

					08-22
					
					888
					
				

			

		

		

			
				
最近在做移动端登录页的时候，发现每次输入账号密码，底部的版权信息(absolute定位到底部）就会被软键盘顶上来，遮住账号密码输入框，后边想到了一个办法，给整个主题加一个最小高度，这样软键盘出来之后也不会被顶上来。有不足之处还望指出，下面看代码
html:
<div class="login_box">
    <div class="weui-cell_vcode clearf...

			
		

	



                


  
              

                


	

		

			

				
					
移动端“事件交互篇-远程实战开发课程”

				
			

			

				

					xinjinghe的博客
				

				

					06-04
					
					259
					
				

			

		

		

			
				
百度云网盘下载移动端“事件交互篇-远程实战开发课程”1-移动端event相关问题2-touchEvent和滑屏3-滑屏的幻灯片（一）4-滑屏的幻灯片（二）5-移动端适配6-移动端布局注意事项7-音悦台布局8-显示隐藏的菜单和缓冲导航9-导航的缓冲和回弹动画10-滑屏选项卡上11-滑动选项卡12-3D（上）13-3D（下）14-百分比布局15-3d桌面切换16-touchEvent和transiti...

			
		

	





	

		

			

				
					
关于HTML5中meta name=“viewport“ 的用法

					
热门推荐

				
			

			

				

					自然醒
				

				

					11-01
					
					7万+
					
				

			

		

		

			
				
vieport，移动端布局

			
		

	



		

			
		



	

		

			

				
					
移动端手机端web页面

				
			

			

				

					09-12
				

			

		

		

			
				
根据一个网站页面自己仿写的手机端页面，移动端响应式布局

			
		

	





	

		

			

				
					
03-妙味移动端开发视频

				
			

			

				

					07-22
				

			

		

		

			
				
资源名称：03-妙味移动端开发视频资源目录：移动端实战系列视频教程移动前端开发视频 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。

			
		

	





	

		

			

				
					
妙味课堂的JavaScript视频教程全集下载

				
			

			

				

					01-15
				

			

		

		

			
				
提供的是妙味课堂的JavaScript视频教程全集下载，百度网盘链接 《初级》 http://pan.baidu.com/s/1hqyEjJ2 《中级》 http://pan.baidu.com/s/1pJ3P8uf 《高级》 http://pan.baidu.com/s/1mgu2msK

			
		

	





	

		

			

				
					
妙味课堂JS视频课后作业-完整详细版

				
			

			

				

					01-31
				

			

		

		

			
				
妙味课堂JS视频课后作业-完整详细版，是我自己学习过程中整理的文件，还有leo老师的解法~希望能给学前端的伙伴们提供方便。

			
		

	





	

		

			

				
					
妙味课堂javascript特效视频教程

				
			

			

				

					07-22
				

			

		

		

			
				
	教程名称：妙味课堂Javaｓｃｒｉｐｔ特效视频教程    	     	     	     	课程目录：    	【】01-视频教程版块——360度全景图片    	【】02-视频教程版块——QQ幻灯片    	【】03-视频教程版块——变量详解(2课...

			
		

	





	

		

			

				
					
妙味课堂javascript高级进阶视频课程【16讲】

				
			

			

				

					07-22
				

			

		

		

			
				
	教程名称：妙味课堂Javaｓｃｒｉｐｔ高级进阶视频课程【16讲】    	     	     	     	课程目录：    	【】8-dom高级1    	【】8-dom高级2    	【】8-php后台1    	【】8-php后台2    	【】8-事件高级应用1    	...

			
		

	





	

		

			

				
					
妙味课堂——前端HTML+CSS修炼之道-值得反复推敲的经典布局方案

				
			

			

				

					11-10
				

			

		

		

			
				
前端HTML+CSS修炼之道-值得反复推敲的经典布局方案.如何合理的对网页中的各个元素进行合理布局 前端HTML+CSS修炼之道-值得...如何合理的对网页中的各个元素进行合理布局 ...如何合理的对网页中的各个元素进行合理布局

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值