移动端面试题3.1 说说你知道的移动端web的兼容性bug 1、一些情况下对非可点击元素如(label,span)监听c

3.1 说说你知道的移动端web的兼容性bug

1、一些情况下对非可点击元素如(label,span)监听click事件，ios下不会触发，css增加cursor:pointer就搞定了。

2.position 在Safari下的两个属性(top,left)需要都写，只写一个容易发生错乱

3.Input 的placeholder会出现文本位置偏上的情况

input 的placeholder会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height:normal

4.ios点击穿透问题

event.preventDefault + 重新给<a>元素绑定新的链接

3.2 有哪些多屏适配方案

1. media query + rem

2. flex

3. 弹性布局

3.3 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面3.4 忽略将页面中的数字识别为电话号码

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

3.5 忽略Android平台中对邮箱地址的识别

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

3.6 移动端click屏幕产生200-300 ms的延迟响应

移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。

以下是历史原因，来源一个公司内一个同事的分享：2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。

双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。

原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。

解决方案：

fastclick可以解决在手机上点击事件的300ms延迟

zepto的touch模块，tap事件也是为了解决在click的延迟问题

3.7 触摸事件的响应顺序

ontouchstart
ontouchmove
ontouchend
onclick

3.8 什么是Retina 显示屏，带来了什么问题

retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个

在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍

那么，前端的应对方案是：

3.9 ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

3.10 webkit表单输入框placeholder的颜色值怎么改变？

input::-webkit-input-placeholder{color:#AAAAAA;}

input:focus::-webkit-input-placeholder{color:#EEEEEE;}

3.11 打电话发短信写邮件怎么实现

3.12 解释一下移动端的缩放

放大

会使一个css像素的面积变大

一个css像素所包含的物理像素变多

视觉视口所包含的css像素的个数变少

缩小（默认情况下（没有meta标签）其实已经有了一个缩小操作了）

会使一个css像素的面积变小

一个css像素所包含的物理像素变少

视觉视口所包含的css像素的个数变多

3.13手机端上图片长时间点击会选中图片，如何处理?

οnselect=function() {
return false
}

3.14 video标签的几个个属性方法

src：视频的URL
poster：视频封面，没有播放时显示的图片
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
width：视频宽度
height：视频高度

3.15 常见的视频编码格式有几种?视频格式有几种?

视频格式：MPEG-1、MPEG-2和MPEG4 、AVI 、RM、ASF和WMV格式视频编码格式：H.264、MPEG-4、MPEG-2、WMA-HD以及VC-1

3.16 canvas在标签上设置宽高和在style中设置宽高有什么区别？

canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。而style的width和height是canvas在浏览器中被渲染的高度和宽度。如果canvas的width和height没指定或值不正确，就被设置成默认值。

3.17 viewport 所有属性？

(1)width :设置layout viewport的宽度，为一个正整数，或字符串'device-width';
(2)initial-scale:设置页面的初始缩放值，为一个数字，可以带小数。
(3)minimum-scale:允许用户的最小缩放值，为一个数字，可以带小数。
(4)maximum-scale:允许用户的最大缩放值，为一个数字，可以带小数。
(5)height:设置layout viewport的高度，这个属性对我们并不重要，很少使用
(6)user-scalable:是否允许用户进行缩放，值为‘no’或者‘yes’。
安卓中还支持：target-densitydpi，表示目标设备的密度等级，作用是决定css中的1px 代表多少物理像素
(7)target-densitydpi:值可以为一个数值或者 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个

3.18 media属性？screen？All？max-width?min-width?

media 属性规定被链接文档将显示在什么设备上。media 属性用于为不同的媒介类型规定不同的样式。Screen计算机默认屏幕，all适用于所有设备，max-width超过最大宽度就不执行，min-width必须大于最小宽度才执行。

————————————————
版权声明：本文为CSDN博主「疯狂行者」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：blog.csdn.net/QinTao99612…

移动端面试题