移动端问题

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

单击穿透现象有3种。

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

解决：

（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按钮样式会被默认样式覆盖的问题？

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、移动端用过那些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">

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

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