移动端bug

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%;}
/*或者*/
 * {
   -webkit-text-size-adjust: none;
 }

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;
  margin: 0;
  -webkit-appearance: none; //可同时屏蔽输入框怪异的内阴影,解决iOS下无法修改按钮样式,测试还发现,加了此属性后,iOS下默认还是有圆角的,不过可以用border-radius属性修改
}

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。

22、ios中，输入框获得焦点时，页面输入框被遮盖，定位的元素位置错乱：

当页input存在于吸顶或者吸底元素中时，用户点击输入框，输入法弹出后，fiexd失效，页面中定位好的元素随屏幕滚动。

解决方案如下：

方案一： Web API 接口 ：scrollIntoView 的应用，将input输入框显示在可视区域。

 // 输入框获得焦点时，元素移动到可视区域
inputOnFocus(e) {
  setTimeout(function(){ 
    e.target.scrollIntoView(true); 
    // true:元素的顶端将和其所在滚动区的可视区域的顶端对齐; false:底端对齐。
  },200);  // 延时 == 键盘弹起需要时间 }

方案二：在输入框获得焦点时，将页面滑动到最底部，避免fixed导致的页面乱飞，并且保证input在最底部。

var timer；
// 输入框获得焦点时，将元素设置为position:static，设置timer
inputOnFocus(e) {
  e.target.style.className = 'input input-static'; 
  timer = setInterval( 
    function() { 
      document.body.scrollTop = document.body.scrollHeight 
    }, 100)}；
  // 输入框失去焦点时，将元素设置为 position:fixed，清除timer
  inputOnbulr(e) { 
    e.target.parentNode.className = 'input input-fixed'; 
    clearInterval(timer)
  }；

当获得焦点弹出虚拟键盘后，input输入框会一直紧贴键盘顶部。如果，你的页面弹出输入法后不需要滑动查看其他内容，那么你对这种方案应该很中意。

方案三：将页面进行拆分: 页面（main） = 内容（sectionA） + 输入框（sectionB）+ 其他（sectionOther）

原理 ： main.height = window.screen.height ;
sectionA 绝对定位，进行内部滚动 overflow-y：scroll ;
sectionB 可保证在页面最底部。
.main { position: relative; height: 100%; }
.sectionA { box-sizing: border-box; padding-bottom: 60px; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch //为了使滚动流畅，sectionA 添加属性 }
.sectionB { position: absolute; height: 60px; overflow: hidden; left: 0; right: 0; bottom: 0; }

纯css3打造，可以滚动，可以固定位置,基本满足大部分布局需要。

23、iOS下取消input在输入的时候英文首字母的默认大写

<input type="text" autocapitalize="none">

24、禁止 iOS 识别长串数字为电话

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

25、禁止 iOS 弹出各种操作窗口

-webkit-touch-callout: none;

26、禁止ios和android用户选中文字

-webkit-user-select: none;

27、消除transition闪屏问题

/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/ 
-webkit-transform-style: preserve-3d; 
/*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/  
-webkit-backface-visibility: hidden;

28、CSS动画页面闪白,动画卡顿

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0); 
-ms-transform: translate3d(0, 0, 0); 
transform: translate3d(0, 0, 0);

29、input的placeholder会出现文本位置偏上的情况

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

line-height：normal;

30、IOS 中单行输入框输入内容长被遮盖，不能显示全部，且不能左右滑动。

这个是IOS的一个bug，可以考虑用 textarea 替换 input，设置一行的高，进行上下滚动查看。（其他方案可以参看下面 第 6 点）

31、获得焦点时，光标消失或错位：

• -webkit-user-select:none 导致 input 框在 iOS 中无法输入，光标不出现，设置如下

  user-select: text;
  -webkit-user-select: text;

• 利用scrollIntoView 使当前元素出现到指定位置，避免光标错位，设置如下：

  e.target.scrollIntoView(true);  
  e.target.scrollIntoViewIfNeeded();

  32、进入页面如何自动获取焦点，弹出软键盘？

• 添加 autofocus 属性 支持自动获得焦点

• 触发 focus() 事件

33、随文字输入，输入框宽度自适应。

 onkeyPress(e) {
   const testLength = e.target.value.length;
   e.target.style.width = `${testLength*8+10}px`
 }

testLength 8 英文字符，testLength 16中文字符， +10为后边光标预留位置。 这种方案显然不适用于对精确度有很高要求的需求。

34、介绍一个属性：contenteditable，模拟输入时动态获取宽高

• （1）div设置contentditable=true 可以将此元素变成可输入状态。

  <div  class="inputContent"  contenteditable="true" ></div>

• （2）想要变成input输入框，利用css模拟输入框的样式

  .inputContent{ 
  color: #444; 
  border: #999 solid 1px;
  border-radius: 3px; 
  padding: 5px 10px;
  box-sizing: border-box;  
  min-width: 50px; 
  max-width: 300px; 
  background: #ffffff;
  }

  这里配合min-width，max-width 效果更真实。

• （3）点击div可以弹出软键盘，但是无法输入内容，需要设置属性，如下

  .inputContent{
    user-select:text;
    -webkit-user-select:text;
  }

  这样就完成一个可以根据获取输入内容来动态来调节宽高。
  还可以利用js模拟placeholder等，这里就不展开了
  

  35、其他问题及解决

• 输入框获得焦点可弹出软键盘，却没有光标闪烁，也无法正常输入。 ```javascript -webkit-user-select:none 导致的，可以这样解决

*:not(input,textarea) { -webkit-touch-callout: none; -webkit-user-select: none; }

- input 自定义样式
```javascript
// 使用伪类
input::-webkit-input-placeholder,
input::-moz-placeholder,
input::-ms-input-placeholder {
 ...style
 text-align: center;
}

36、ios下 输入框获取焦点后，失去焦点后页面不回弹，顶部上移了，底部留有一截灰色区域，需要手动随意触摸一个地方。才会回弹。

解决方法：监听软键盘弹起、关闭事件，在进行对应的操作

mounted () {// 软键盘关闭事件   可在全局的地方  vue的话比如App.vue 文件里添加以下代码 
  document.body.addEventListener('focusout', () => {  
    // 回到原点  若觉得一瞬间回到底部不够炫酷，那自己可以自定义缓慢回弹效果， 可用css 、贝塞尔曲线、js的 requestAnimationFrame  等等 方法 实现体验性更好的回弹效果 
    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })  
  })}