web移动端常见面试题以及适配兼容问题

web移动端

1、移动端你们一般采用什么布局？移动端设计稿是多大的尺寸？

● 定宽布局

● 一般移动端设计稿是640或者750的尺寸

2、移动布局自适应不同屏幕的几种方式

（1）响应式布局

（2）100%布局（弹性布局）

（3）等比缩放布局（rem）

3、你们做移动端平时在什么浏览器上测试？

      Chrome，Safari，微信X5，UC，其他手机自带浏览器

4、说说移动端是如何调试的？

（1）模拟手机调试chrome://inspect

（2）真机调试之android手机+Chrome

（3）真机调试之iphone + safari

（4）UC浏览器

（5）微信内置浏览器调试

（6）debuggap

（7）抓包

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

（1） 检测手机竖屏的时候，元素给元素添加90deg的旋转

（2） 检测手机横屏的时候，元素给元素的旋转再改为0

6、em和rem的区别

● em相对父级元素设置的font-size来设置大小 如果父元素没有设置font-size ，则继续向上查找，直至有设置font-size元素

● rem直接参照html标签字体大小，并且所有使用rem单位的都是参照html标签

7、移动端用过那些meta标签？

 

 

 

8、为什么移动端click会有300毫秒延迟？

        因为移动端浏览器会有一些默认的行为，比如双击缩放、双击滚动。这些行为尤其是双击缩放，主要是为桌面网站在移动端的浏览体验设计的。而在用户对页面进行操作的时候，移动端浏览器会优先判断用户是否要触发默认的行为。

9、移动端zepto中的tap事件点透问题？

● 问题点击穿透问题：点击蒙层（mask）上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件

● zepto的tap事件是绑定到document的，所以一般点击tap事件都会冒泡到document才会触发。当点击隐藏蒙层的时候默认也会手指触发到蒙层下面的元素  执行事件

（1） github上有个fastclick插件，用来规避click事件的延时执行

（2）用touchend代替tap事件并阻止掉touchend的默认行为preventDefault()

//tap事件出现点透问题

 $("#id").on("tap", function (event) {

//很多处理比如隐藏什么的

     event.preventDefault();

 });

//touchend事件解决点头问题

 $("#id").on("touchend", function (event) {

//很多处理比如隐藏什么的

     event.preventDefault();

 });

（3）给tap事件里面的隐藏蒙层方法执行的方法300毫秒延迟

$("#id").on('tap',function(ev){

setTimeout(function(){

$("#id").hide();

},320)

})

10、固定定位布局键盘挡住输入框内容？

分析：

● 在软件盘弹出之后（在focus中加个延迟时间），获取input的坐标

● 判断input是否遮挡

● 判断 input 是否在可视区的高度以下

● 如果被遮挡了，就向上移动整个页面

（1）通过绑定窗口改变事件,监听键盘的弹出。然后去改变固定定位元素的位置。默认键盘的宽度应该是页面的2分之一。所以我们位移的距离改成键盘的二分之一就可以。

window.onresize = function(){

//$(".mian")就是固定定位的元素

if($(".mian").css('top').replace('px','') != 0){

$(".mian").css('top',0);

}else{

var winHeight = $(window).height();

$(".mian").css('top',-(winHeight/4));

  }

}

（2）通过定时器实时监听是否触发input。如果触发input框，就把固定定位改变成静态定位。这样就会浏览器会总动把内容顶上去。

function fixedWatch(el) {

//activeElement获取焦点元素

if(document.activeElement.nodeName == 'INPUT') {

el.css('position', 'static');

} else {

el.css('position', 'fixed');

}

}

setInterval(function() {

fixedWatch($('.mian'));

}, 500);

11、为什么安卓浏览器看背景图片，有些设备会模糊？

     因为手机分辨率太小，如果按照分辨率来显示网页，字会非常小，安卓手机devicePixoRadio比较乱，有1.5的，有2的也有3的。想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况下都是2倍的），或者指定background-size:contain;都可以。

用-webkit-min-device-pixel-ratio可以做到不同倍数不同尺寸的图片：

.icon-logo{

    background-image: url(src/assets/logo.png);

    width: 24px;

    height: 24px;

    background-size: contain;}@media screen and (-webkit-min-device-pixel-ratio: 2){

    .icon-logo { background-image: url(src/assets/[email protected]); }}@media screen and (-webkit-min-device-pixel-ratio: 3){

    .icon-logo { background-image: url(src/assets/[email protected]); }}@media screen and (-webkit-min-device-pixel-ratio: 4){

    .icon-logo { background-image: url(src/assets/[email protected]); }}

12、pc端与移动端字体大小的问题

html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{

    -webkit-text-size-adjust:100%;}

pc端字体正常显示，但ios真机就出现，h1、span等标签字体比较大。

html{

    -webkit-text-size-adjust:100%;/*ios端谷歌浏览器测试有效，Android端未测试*/}

13、如何防止手机中页面放大和缩小？

14、如何解决上下拉动滚动条时出现卡顿的现象？

body{

    -webkit-overflow-scrolling:touch;

    overflow-scrolling:touch;}

Android3+和iOSi5+支持CSS3的新属性为overflow-scrolling

15、如何解决长时间按住页面闪退的现象？

element{

    -webkit-touch-callout:none;}

16、iphone及ipad下输入框默认内阴影

element{

    -webkit-appearance:none;}

17、ios和android下触摸元素时出现半透明灰色遮罩

element{

    -webkit-tap-highlight-color:rgba(255,255,255,0);}

设置alpha值为0就可以去除本透明灰色遮罩，备注：transparent的属性值在android下无效。

18、active兼容处理即伪类：active失效

方法一：body添加ontouchstart

方法二：js给document绑定touchstart或touchend事件

bar

19、移动端为什么会有一像素问题？如何解决？ 

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

（1）先使用伪类元素实现边框效果，然后通过媒体查询来操控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倍屏 */@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {

    .border-bottom::after {

        -webkit-transform: scaleY(0.5);

        transform: scaleY(0.5);

    }}

/* 3倍屏 */@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {

    .border-bottom::after {

        -webkit-transform: scaleY(0.33);

        transform: scaleY(0.33);

    }}

（2）使用border-image来代替border

.border-image-1px {

    border-width: 1px 0px;

    -webkit-border-image: url("border.png") 2 0 stretch;

    border-image: url("border.png") 2 0 stretch;}

（3）使用viewport +rem

● 设置meta标签

     name="viewport"

     id="WebViewport"

     content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/> 

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

function rem() {

    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

    let viewport = 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;

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

20、响应式图片

       在移动端中，图片的处理应该是很谨慎的。假设有一张图片本身的尺寸是X宽，设置和包裹它的div一样宽，如果是div宽度小于图片宽度没有问题，但是如果div宽度大于图片的宽度，图片则会被拉伸失真

解决方法：让图片最大只能是自己的宽度

img{

max-width: 100%;

display: block;

margin: 0 auto;

}

21、使用了3d做动画之后，3d元素下边的文字失真的问题

　　给上面动画的幻灯片什么的外层加上绝对定位，定位里面一层加上相对定位。

注：所有题目均来源于网络，只是稍微进行加工。