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

来源：互联网发布：linux shell wait命令编辑：程序博客网时间：2024/05/23 14:32

事件点透是怎么回事？

<!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;/*requestAnimationFramewebkitRequestAnimationFramemozRequestAnimationFramecancelAnimationFramewebkitCancelAnimationFramemozCancelAnimationFramecancelRequestAnimationFramewebkitCancelRequestAnimationFramemozCancelRequestAnimationFrame*/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 180if(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>

阅读全文

0 0