大前端 - 前端高级进阶

# 移动端篇

# 1、在移动端，单击穿透是什么？

单击穿透现象有3种。

  • 单击穿透问题：单击蒙层（mask）上的“关闭”按钮，蒙层消失后，发现触发了按钮下面元素的 click事件。
  • 页面单击穿透问题：如果按钮下面恰妤是一个有href属性的a标签，那么页面就会发生跳转。
  • 跨页面单击穿透问题：这次没有蒙层了，直接单击页内按钮跳转至新页，然后发现新页面中对应位置元素的 click事件被触发了。

有4种解决方案。

（1）只用 touch。

这是最简单的解决方案，完美解决单击穿透问题，把页面内所有 click都换成 touch事件（ touchstart、 touched、tap）。

（2）只用 click

因为单击会带来300ms的延迟，所以页面内任何一个自定义交互都将增加300ms的延迟。

（3）轻触〔tap）后延迟350ms再隐藏蒙层。

改动最小，缺点是隐藏蒙层变慢了，350ms还是能感觉到慢的。

（4）添加 pointer-events:none样式。

这比较麻烦且有缺陷，不建议使用。蒙层隐藏后，给按钮下面的元素添上pointer-events:none样式，让 click穿过去，350ms后去掉这个样式。恢复响应的缺陷是蒙层消失后的350ms内，用户单击按钮下面的元素没反应，如果用户单击速度很快，一定会发现。

# 2、如何实现自适应布局？

通过以下几种方式实现。

（1）可以使用媒体查询做响应式页面。

（2）用 Bootstrap的栅格系统。

（3）使用弹性盒模型。

# 3、在移动端（ Android、ioS）怎么做好用户体验？

从以下几方面做好用户体验

（1）清晰的视觉纵线。

（2）信息的分组。

（3）极致的减法。

（4）利用选择代替输入。

（5）标签及文字的排布方式。

（6）依靠明文确认密码。

（7）合理地利用键盘。

# 4、如何解决 Android浏览器查看背景图片模糊的问题？

这个问题是 devicePixelRatio的不同导致的，因为手机分辨率太小，如果按照分辨率来显示网页，字会非常小，所以苹果系统当初就把 iPhone4的960×640像素的分辨率在网页里更改为480×320像素，这样 devicePixelRatio=2。

而 Android的 device PixelRatio比较乱，值有1.5、2和3。

为了在手机里更为清晰地显示图片，必须使用2倍宽高的背景图来代替img标签（一般情况下都使用2倍）。

例如一个div的宽高是100px×100px，背景图必须是200px×200px，然后设置 background-size;contain样式，显示出来的图片就比较清晰了。

# 5、如何解决长时间按住页面出现闪退的问题？

通过以下代码设置样式。

element {
	-webkit-touch-callout:none；
}

# 6、如何解决 iPhone及iPad下输入框的默认内阴影问题？

通过以下代码设置样式。

element {
	-webkit-appearance:none；
}

# 7、在iOS和 Android下，如何实现触摸元素时出现半透明灰色遮罩？

通过以下代码设置样式。

element {
	-webkit-tap-highiight-color:rgba （255， 255， 255， 0）
}

# 8、在旋转屏幕时，如何解决字体大小自动调整的问题？

通过以下代码设置样式。

html, body, form, fieldset, p, div, hl, h2， h3， h4， h5， h6 {
	-webkit-text-size-adjust：100%;
}

# 9、如何解决 Android手机圆角失效问题？

通过background-clip:padding-box为失效的元素设置样式。

# 10、如何解决0S中 input键盘事件 keyup失效问题？

通过以下代码解决。

<input type='text' id='testInput'>
<script type="text/javascript">
	document.getElementById（'testInput').addEventListener（'input', function(e){
        var value =e.target.value
    })；
</script>

# 11、如何解决iOS设置中 input按钮样式会被默认样式覆盖的问题？

设置默认样式为none。解决方式如下。

input,
textarea {
    border:0；
    -webkit-appearance:none；
}

# 12、如何解决通过 transform进行skew变形、 rotate旋转会出现锯齿现象的问题？

通过以下代码设置样式。

-webkit-transform:rotate（-4deg） skew（10deg） translateZ（0）；
transform:rotate（-4deg） skew（10deg） translateZ（0）;
outline:lpx solid rgba（255， 255， 255， 0）;

# 13、如何解决移动端 click事件有300ms延迟的问题？

300ms延迟导致用户体验不好。为了解决这个问题，一般在移动端用 touchstart、 touchend、 touchmove、tap（模拟的事件）事件来取代 click事件。

# 14、在iOS中，以中文输入法输入英文时，如何解决字母之间可能会出现六分之一空格的问题？

可以用正则表达式去掉空格。

this.value = this.value.replace( / \u2006/g，' ')

# 15、如何解决移动端HTML5音频标签audio的 autoplay属性失效问题？

因为自动播放网页中的音频或视频会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和 Android系统通常都会禁止自动播放和使用 JavaScript的触发播放，必须由用户来触发才可以播放。

解决这个问题的代码如下。

document addEventListener ('touchstart'， function( ) {
    //播放音频
    document.getElementsByTagName ('audio')[0].play();
    //暂停音频
    document.getElementsByTagName ('audio')[0].pause()；
})；

# 16、如何解决移动端HTML5中date类型的input标签不支持 placeholder属性的问题？

代码如下。

<input placeholder = "请输入日期" type="text" onfocus="（this.type='date'）" name="date">

# 17、如何通过HTML5调用 Android或iOS的拨号功能？

HTML5提供了自动调用拨号的标签，只要在a标签的href中添加tel：协议就可以了。

拨打固定电话的代码如下。

<a href="te1:021-12345678"> 单击拨打021-12345678 </a>

拨打手机号码的代码如下。

<a href="te1:12345678901"> 单击拨打12345678901 </a>

# 18、如何解决上下拖动滚动条时的卡顿问题？

通过以下代码设置样式。

body {
 -webkit-overflow-scrolling:touch;
 overflow-scrolling:touch;
}

Android3+和iOS5+支持CSS3的新属性 overflow- scrolling，该属性也可以解决上述问题。

# 19、如何禁止复制或选中文本？

通过以下代码设置样式。

Element {
-webkit-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
user-select:none;
}

# 20、如何解决 Android手机的默认浏览器不支持 websocket的问题？

解决办法就是把通信层的websocket改成websocket+http双协议，对外封装成Net。业务层对 websocket的调用都改成对Net的调用。

Net默认连接websocket，如果不攴持，就自动切换到http长轮询。

http的长轮询在使用的时候会有卡顿现象。

# 21、说说你所知道的移动端响应式适配的方法。

对于简单一点的页面，一般高度直接设置成固定值，宽度一般撑满整个屏幕。

对于稍复杂一些的页面，利用百分比设置元素的大小来进行适配，或者利用flex等CSS属性设置一些需要定制的宽度。

对于再复杂一些的响应式页面，需要利用CSS3的媒体查询属性来进行适配，大致思路是根据屏幕的大小，设置相应的CSS。

← git篇 →