前端爬坑日记-移动端开发遇到的各种坑

兼容问题果然是移动开发的一生之敌，一路走来遇到了各种奇奇怪怪的坑，让我匪夷所思，今天笔者我就分享出一些自己开发时遇到的坑吧，有些虽然我也不知道解决办法，希望带佬能看到并赐教

1、IOS部分系统click事件不起作用的问题

笔者我开发时的点击事件习惯用click，虽然不知道移动端开发这样算不算好习惯，但是这次就是这个click事件存在的问题。首先，网上可以找到的click事件不起作用的办法,给个css

.element { cursor: pointer}

一般不出意外的话，这个方法可以解决绝大部分在ios上click事件无效的问题，但是，上次我遇到个问题，在ios9的系统下加了这个属性也没有用，这怎么办呢？于是只能老老实实放弃click,用js的手指事件

// 手指离开时的事件 touchend/touchsmove/touchstart
element.addEventListener("touchend",function()){
	// 执行的内容
}

2、部分机型存在backround失去效果的问题

写弹出层的时候莫名其妙background消失了，不知道为什么，只在个别机型上出现这个问题，知道的带佬可以告诉我，谢谢了。解决办法：给背景颜色加个 !important 就行了。（我反正是这样就行了）

3、部分机型存在select下拉框的背景颜色变灰（或其他颜色）

笔者在安卓某机型上发现，select下拉框的默认背景颜色莫名其妙变成了#cccccc，但是我并没有给它设置背景颜色，只能是它自带的了，之前百度过的一个方法background:none经我自己实验证明并不行（应该有的行有的不行，不敢一棒子打死全部）。我的解决办法：没有背景颜色要求的可以设置background为透明或者#fff，求保险的话可以加个!important

4、IOS浏览器自带底部导航栏导致遮挡住页面的展示问题

IOS部分机型的屏幕太小，能显示的内容有限，如果在页面的最底部有个button按钮的话，你会发现这个按钮会被挡住，笔者我亲测，在安卓下，同样的设计稿写出来的页面，安卓的展示效果很好，IOS的底部部分会被挡住差不多50像素左右，先不说有时向上滑动要滑多次才可能把下面的内容拖上来，其次，如果要展示出来的话，给个padding-bottom会导致安卓那边又丑了，我百度找到了几个方法，如下

/* 限制 ： 可能该属性只针对 iOS 7.1 的 Safari，笔者亲测加了和没加效果一样 有用*/
<meta name="viewport" content="minimal-ui">
/* 这个笔者加了也没效果，但是应该不是它的问题，具体原因未知 */
<meta name="apple-mobile-web-app-capable" content="yes" />

//手机浏览器打开页面时，地址栏和工具栏不隐藏，当你往上滑动页面时再隐藏，往下滑动页面时再显示
window.onload = function() {
      setTimeout(function() {
          window.scrollTo(0, 1)
      }, 0);
};

但加上这段代码后，可能没有效果。这是因为页面内容较少时，不会隐藏地址栏；但网页内容较多，超过屏幕可视高度，才会自动隐藏地址栏，需配合下面的代码

window.onload = function() {
  scroll();
}
 
function scroll() {
   if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) {
       bodyTag = document.getElementsByTagName('body')[0];
       bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + 'px';
   }
}

参考地址：https://www.bbsmax.com/A/Gkz1aj12zR/，感谢大佬的文章，让我收获了许多
到此为止这次分享的爬坑内容就结束了，本人也是自学的前端现在在实习，技术有限可能会有不足的地方希望大神能指点，最后希望能看到本篇文章的前端小伙伴早日成为巨佬，共勉！