移动端H5跳坑指南

前言

在移动端H5应用开发过程当中，咱们不免会碰见不少问题，使得咱们很郁闷。因此我感受有必要把它们记录下来，分享给即将踏入移动端 Web 开发大门的朋友们，更好的解决ios和android兼容。

1.input获取焦点时，页面被放大

设置meta标签

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
复制代码

2.ios input输入时白屏

这个问题貌似只有再ios9中才有 解决方法：在input的父元素上添加相对定位就好了，很是神奇

style="postion:relative;"
复制代码

3.软键盘撑起页面下不来

用js控制focus blur

//input输入框弹起软键盘的解决方案。
var bfscrolltop = document.body.scrollTop;
$("input").focus(function () {
  document.body.scrollTop = document.body.scrollHeight;
}).blur(function () {
  document.body.scrollTop = bfscrolltop;
});
复制代码

4.new Date()设置日期在IOS的兼容问题

通常这样建立一个日期变量

var d = new Date("2017-08-11 12:00:00");
复制代码

发如今iOS中不兼容，返回valid Date。 IOS中不支持 - 链接日期 须要写成

var d = new Date("2017-08-11 12:00:00".replace(/-/g, "/"));
复制代码

5.ios页面滚动不流畅

首先你可能会给页面的html和body增长了height: 100%, 而后就可能形成IOS上页面滑动的卡顿问题。

解决方案是：

1.让html和body固定100%（或者100vh），

2.而后再在内部放一个height:100%的div，设置overflow-y: auto;和-webkit-overflow-scrolling: touch;

.scroll-box {
  /* 模态框之类的div不能放在这个容器中 */
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
复制代码

6.position:fixed/absolute随屏幕滚动

注：ios里的fixed在某些状况下不符合咱们的预期，通常咱们会使用absolute模拟fixed行为 或者能够在position:fixed/absolute内加入：

-webkit-transform: translateZ(0);
复制代码

抖动状况，则在内容区域，加入 ：

overflow-y: auto;
复制代码

7.点击元素产生背景或边框怎么去掉

ios用户点击一个连接，会出现一个半透明灰色遮罩, 若是想要禁用，可设置-webkit-tap-highlight-color的alpha值为0去除灰色半透明遮罩；

android用户点击一个连接，会出现一个边框或者半透明灰色遮罩, 不一样生产商定义出来额效果不同，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果；

//特殊说明：有些机型去除不了，如小米2。对于按钮类还有个办法，不使用a或者input标签，直接用div标签

a,button,input,textarea { 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    -webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有个反作用，就是输入法再也不可以输入多个字符
}   
// 也能够 
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
//winphone下
复制代码

<meta name="msapplication-tap-highlight" content="no">
复制代码

8.IOS机型margin属性无效问题？

(1) 设置html body的高度为百分比时，margin-bottom在safari里失效

(2) 直接padding代替margin

9.Ios键盘换行变为搜索？

首先，input 要放在 form里面。

这时 "换行" 已经变成 “前往”。

若是想变成 “搜索”，input 设置 type="search"。

10.iOS 1px border 实现

iOS设备上，因为retina屏的缘由，1px 的 border 会显示成两个物理像素，因此看起来会感受很粗，这是一个移动端开发常见的问题。解决方案有不少，但都有本身的优缺点。

0.5px border
复制代码

从iOS 8开始，iOS 浏览器支持 0.5px 的 border，可是在 Android 上是不支持的，0.5px 会被认为是 0px，因此这种方法，兼容性是不好的。

另一种方法是背景渐变，

CSS3 有了渐变背景，能够经过渐变背景实现 1px 的 border，实现原理是设置 1px 的渐变背景，50% 有颜色，50% 是透明。

@mixin commonStyle() {
  background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
  background-repeat: no-repeat;
  background-position: top, right top,  bottom, left top;
}


@mixin border($border-color) {
  @include commonStyle();
  background-image:linear-gradient(180deg, $border-color, $border-color 50%, transparent 50%),
  linear-gradient(270deg, $border-color, $border-color 50%, transparent 50%),
  linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%),
  linear-gradient(90deg, $border-color, $border-color 50%, transparent 50%);
}
复制代码

11.ios与android的标签表现不一致的问题

ios和android的select标签还有input[type=”button”]在真机上的样式会有区别，因此咱们能够加上这一条css来消除ios和android的样式差异：

-webkit-appearance: none;
复制代码

12.巧用flex布局让图片等比缩放

这也是一个小技巧！项目中须要开发swiper轮播图，那么你懂的，图片确定是须要保证等比缩放展现。

<div class="parent">
  <img src="imgSrc" alt="">
</div>
复制代码

<style>
.parent {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  
  img {
    width :100%;
    height: auto;
  }
}
</style>
复制代码

结语

OK，大功告成！

以上即是我在最近的移动端项目实战中的一些经验总结，但愿对各位小伙伴或多或少有些帮助吧！若是有帮助，别吝惜你手上的赞哦~