移动端页面踩坑合集

上周接的一个移动端的活动，那是一踩一个坑啊，在chrome和模拟器上调试没问题，但是你万万想不到，手机的型号怎么这么多，做好各设备的兼容将是各前端er的重要使命，且任重而道远。

一、自适应布局

在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后

大概viewport可以理解为三种

1、layout viewport ,也就是这个浏览器默认的viewport

2、visual viewport  , 浏览器可视区域viewport

3、 ideal viewport  ,移动设备的理想viewport

通俗点讲，pc端css中的1px并不会等于移动端，原理很简单，举个例子说

通过chrome浏览器可以知道，一个Iphone 6 plus是414*736，而pc端的页面动辄几千px以上，所以css中的1px并不等于设备的1px

这也就意味着设备的1px等于多个csspx，也就是1px:Npx的关系。

常用的布局有百分比布局，rem布局，flex布局。

1.百分比布局

设置当前容器的宽度以%为单位，例：在以容器body为父级占据body的width的百分比，按百分比布局,精度肯定不会有rem精确。字体的大小通常会加上媒体查询使用，附上：

@media screen and (max-width: 359px){
	body,html,input{
		font-size:13px;
		 }
	}
@media screen and (min-width: 360px) and (max-width:410px){
	body,html,input{
		font-size:15px;
    	}
	}
@media screen and (min-width: 411px){
	body,html,input{
		font-size:16px;
		}
	}

2.rem布局

rem是一个相对长度单位，跟em类似，不过rem参照的是页面根元素，em参照的是当前父元素。rem布局的思路其实很简单，在编写样式的时候，在需要实现自适应的长度属性使用rem单位。

当时我碰到的问题就来了，在chrome和模拟器上随意切换手机各种适应，没问题。真机上……完蛋，页面初始加载的时候处于最大，需要上下拖动才能适应手机的尺寸(左图为初进页面，右图上下拖动后)

             

问题出在我没有给body和html设置宽度，也给后续带来了很多问题。一般这个问题给body设置宽度和overflow:hidden加上滚动条就可以了：

body{
    width: 10rem;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
}

或者最简单的方法，给body使用absolute：

html{
    position:relative;
}
body{
    position:absolute;
    top:0;
    left:0;
}

我的页面加上之后，加载的问题是解决了，但是页面不能拖动了（手动捂脸），查阅资料，再看看rem的单位的详解，font-size是根据屏幕大小而动态改变的，可以推算出公式：

---

屏幕宽度/设计稿rem宽度=页面动态font-size值（例：375/7.5=50）；

---

获取到值之后，再赋给html元素的style：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

这样就设置好了每个页面的根font-size，因为rem单位是基于根font-size，因此只要确定一种设计稿对应手机的换算，其余屏幕尺寸均可自动适配。

二、Safari浏览器的坑

1、position:fixed在ios的显示效果会出现两种情况：

（1）：点击fixed定位的元素会出现fixed定位失效导致的元素贴向底部，即position: absolute，bottom: 0px;的情况

（2）：点击fixed定位的元素，元素向上移，定位生效，位置偏移大

解决方案 - 仅针对Safari

给fixed定位元素设置一个点击事件，在点击事件回调函数中加入 window.scrollTo(0, document.body.scrollHeight); (将页面视口定位至页面底部)，然后改变定位元素的css class，把 position: fixed ==> position: absolute，这样，就可以很快的解决fixed定位导致的前两类Bug，当然，如果定位元素是Input标签，别忘了增加 blur 事件在失去聚焦后把css class改回。

在ios下的input会出现内阴影的样式，button会出现其他样式，别忘了在写样式之前清除，附上：

        a,img {
		    text-decoration: none;
		    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		    -webkit-touch-callout: none;
		}
		input::-webkit-clear-button,
		input::-webkit-inner-spin-button,
		input::-webkit-outer-spin-button {
		    -webkit-appearance: none;
		}
		
		input::-webkit-search-cancel-button {
		    display: none;
		}

2、ios下input的placeholder不显示问题

在ios下input的placeholder的底部是有一丝黑色的，就像被上层有一个白色的遮罩遮住了，解决方法，给placeholder加上font-size就ok了：

         input::-webkit-input-placeholder {
		        /* placeholder颜色  */
		         color: #999;
		         font-size: 0.426666rem;
		     } 

3、select的样式

ios下select也会带有默认的样式，去掉就可以了

        select{
			-webkit-touch-callout: none;
			-webkit-appearance: none;
		}

这里记录下来的原因是因为，我们设计在审查我的页面样式的时候，说页面上的select的下拉符离框太近了，与原设计图上不符，属于bug，emmmmmmmmmmmm……

解决的方法是将select原先的样式隐藏掉，加上边框，没有下拉符看上去很像一个input（手动doge），所以背景图就设置为需要的图片(上箭头或者下箭头之类)，添加的时候注意，为了避免文字被覆盖，需要为它留出一小部分，附上代码：

        select {
			  /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
			  border: solid 1px #000;
			
			  /*将默认的select选择框样式清除*/
			  appearance:none;
			  -moz-appearance:none;
			  -webkit-appearance:none;
			
			  /*在选择框的最右侧中间显示小箭头图片*/
			  background: url(../img/ico-arrow.png) no-repeat scroll right center transparent;
			
			
			  /*为下拉小箭头留出一点位置，避免被文字覆盖*/
			  padding-right: 14px;
			  background:url('../images/wechat/down.svg') 95% 50% no-repeat scroll transparent;
			  background-size:5%;
			  border-radius:0.08rem;	
			  border: 1px solid #D7D7D7;
			}

4、input框在遮罩层点击的时候光标错位

当时我也不相信，一个input能有这么多的事情，造成这个问题的原因还是因为fixed的问题，在点击input的时候，手机键盘把容器推上去了，但是input还处在原来的位置，就出现了这样的情况，所以在移动端的项目中，还是少使用fixed吧，避免出现各种问题。

三、移动端嵌入音频

如果只是在页面嵌入一个音频，可以直接使用audio标签，并且可以使用play和pause方法，直接来操作音频的播放和暂停。

只是这里有个需要注意的地方是：

在IOS端，audio的autoPlay属性，是无法执行的，甚至你直接使用play方法，也是无法自动播放音频的，这可能与IOS对audio的处理机制有关，首先需要您对页面有操作（触摸屏幕），之后再执行play，即可正常播放，之后的play和pause也都会正常。

另外，尽量不要使用特殊字体，毕竟，受字体本身的影响可能会影响布局问题。

总结：移动端开发中，常出现的问题，需尽量避免。

本篇整理出来的就是这些了，后续有问题会持续更。