web前端移动端面试高频问题分享

随着互联网时代的到来，大家每天使用手机的时间要远远高于笔记本或者台式的时间。因此，许多企业就会更加着重于移动端的开发。而对于web前端来说，移动web前端开发涉及到每个人的手机屏幕以及手机系统、兼容等等。因此，如果移动web前端面试就和pc端考察侧重就会有所区别。接下来就给大家分享一下web前端移动端面试高频的问题，附答案。

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

答：布局：自适应布局

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

2、em和rem的区别

答：

em相对父级元素设置的font-size来设置大小，如果父元素没有设置

font-size ，则继续向上查找，直至有设置font-size元素

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

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

答：

<!--1:设置视口宽度  缩放比例-->
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
 
<!--2:忽略将数字变为电话号码-->
<meta content="telephone=no" name="format-detection">
 
<!--3:忽略识别邮箱-->
<meta name="format-detection" content="email=no" />
 
<!--4:IOS中Safari允许全屏浏览-->
<meta content="yes" name="apple-mobile-web-app-capable">

4、移动端用的哪个js库？

答：zepto.js。这个与jq差不多，是属于缩小版的jq。

5、移动端click 300毫秒延迟原因

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

6、移动端横屏怎么处理？

答：写好一套样式 获取窗口的宽度大于高度的时候 说明横屏了 。那么就显示一个遮罩层提示用户 竖屏观看更佳。

7、处理过哪些移动端兼容问题？（面试常问）

答：

移动端默认的input和按钮样式还有点击出现的样式不一样 需要默认去清除一些默认样式
手机拍照和上传图片，IOS有拍照、录像、选取本地图片功能，部分Android只有选择本地图片功能，Winphone不支持
消除transition闪屏
固定定位相关问题

• 固定定位会产生 键盘弹出遮住固定元素里面元素的input框
• 固定定位的遮罩层弹出时 滚动到最底部 qq和uc浏览器会出现遮罩层下面的样式露出来

在ios上写有邮箱文本点击这个邮箱地址不会有反应，安卓手机上点击邮箱会自动打开本地邮箱软件

8、说出移动端的几种布局方案，至少说出3种（面试常问）

答：

「1」流式布局（百分比布局）

• 将盒子的宽度设置成百分比，从而根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

• 该布局是移动web开发使用的比较常见的布局方式

• 开发时，需要定义页面的最大和最小支持宽度

「2」flex弹性布局：

通过给父盒子添加flex属性，来控制子盒子的位置和排序方式，采用flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称“项目”。移动端应用广泛，PC端浏览器支持情况较差。

「3」rem适配布局

现市场主流的rem适配方案技术搭配：less+媒体查询+rem、flexible.js+rem

「4」响应式布局

开发原理是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同的设备，需要一个父级做为布局容器，来配合子级元素来实现变化效果

以上就是“web前端移动端面试高频问题分享”的详细内容，想要了解更多web前端教程欢迎持续关注编程学习网