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

最新推荐文章于 2024-11-06 10:05:25 发布

sookielulu

最新推荐文章于 2024-11-06 10:05:25 发布

阅读量4.4k

点赞数 6

原文链接：https://www.jianshu.com/p/8178c5c976f2

版权

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标签？

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

<meta content="telephone=no" name="format-detection">

<meta name="format-detection" content="email=no" />

<meta content="yes" name="apple-mobile-web-app-capable">

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/logo@2.png); }}@media screen and (-webkit-min-device-pixel-ratio: 3){

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

    .icon-logo { background-image: url(src/assets/logo@4.png); }}

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、如何防止手机中页面放大和缩小？

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

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

<body ontouchstart=''>

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

<style>

    a

    {

        color:#000;

    }

a:active

    {

        color:#fff;

    }

</style>

<a href=foo>bar</a>

<script>

    document.addEventListentener('touchstart',function(){},false);

</script>

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标签

<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;