第十二天Web前端面试题

1,请详解移动端点透,为什么会发生点透?描述发生的场景及解决方案,(越多越好)

点透场景

层A 覆盖在层B上面,常见的有对话框等,层A用 touchstart 或者tap(zepto)事件点击进行隐藏或者移开,由于click晚于touchstart,超过300ms,当层A隐藏后,click到的是下面的层B,此时层B的click事件会触发,或者其上的a链接会跳转,input,select会吊起键盘。

zepto的tap事件原理

zepto的 tap 事件是通过 touchstart , touchend (android 4.0.x不支持touchend,通过touchmove 设置定时器触发touched)模拟出来的,事件是绑定在document上,大体思路是在touchstart的时候向对象附加点击的x,y;(其中还包含很多细节,比如设置最后点击时间,设置长按定时器等);touchmove的过程动态的计算手势在view上的偏移点,最后touchend 根据偏移点确定是否是点击,如果是点击动态的构建一个event然后根据设置的状态获取是单机、双击。

非zepto的tap事件未必会出现点透问题。

点透解决方案

来得很直接github上有个fastclick可以完美解决 https://github.com/ftlabs/fastclick

引入fastclick.js,因为fastclick源码不依赖其他库所以你可以在原生的js前直接加上

.touchFix{visibility: hidden;width: 100%;height: 100%;position: absolute;left: 0px;top: 0px;z-index: 9999;}

2> touchstart换成touchend,因为触发touchend需要200ms所以可以把触发时间这个原理问题解决掉

$("#cbFinish").on("touchend",function (e) {

  e.preventDefault();

});

3> zepto最新版已经修复了这个问题,或者使用fastclick、hammer等通用库

4> 直接用click,不考虑延迟

5> 下层避开click事件,如a链接改为span等标签,使用js跳转页面

2,移动端为什么会有一像素问题?如何解决?

为什么会有一像素问题?

因为在移动端,由于屏幕分辨率的不同,现在分为一倍屏、二倍屏、三倍屏。在不同的分辨率上,有可能一像素被渲然成二个像素点或者三个像素点,所以在实际写代码的时候,我们写的 border: 1px solid #000; 可能实际被渲然为 2px/3px;

先使用伪类元素实现边框效果,然后通过媒体查询来操控transform: scale来适配不同分辨率

.border-bottom{position: relative;}.border-bottom::after{content:" ";position: absolute;left:0;bottom:0;width:100%;height:1px;background-color:#e4e4e4;-webkit-transform-origin: left bottom;transform-origin: left bottom;}/* 2倍屏 */@mediaonly screen and (-webkit-min-device-pixel-ratio:2.0) {.border-bottom::after{-webkit-transform:scaleY(0.5);transform:scaleY(0.5);    }}/* 3倍屏 */@mediaonly screen and (-webkit-min-device-pixel-ratio:3.0) {.border-bottom::after{-webkit-transform:scaleY(0.33);transform:scaleY(0.33);    }}

使用border-image来代替border

.border-image-1px{border-width:1px0px;-webkit-border-image:url("border.png")20stretch;border-image:url("border.png")20stretch;}

使用viewport +rem

设置meta标签

并在js中通过判断当前是一倍屏还是二倍屏、三倍屏,来动态的设置meta标签的内容

functionrem(){document.documentElement.style.fontSize =document.documentElement.clientWidth /7.5+'px';letviewport =document.querySelector("#WebViewport")if(window.devicePixelRatio ==1) {        viewport.setAttribute('content','width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')    }if(window.devicePixelRatio ==2) {        viewport.setAttribute('content','width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')    }if(window.devicePixelRatio ==3) {        viewport.setAttribute('content','width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no')    } }rem()window.onresize = rem;// 文章由 郝晨光 整理,未经同意禁止转载

border.css

通过项目中引入border.css来解决

3,你还知不知道其他移动端的常见问题?

https://www.jianshu.com/p/53fbe94da0c8

你可能感兴趣的:(第十二天Web前端面试题)