H5在移动端的兼容性问题

H5的在移动端的一些兼容问题

- 移动端为什么要做适配

移动端为什么要做适配

在移动端虽然整体来说大部分浏览器内核都是webkit，而且大部分都支持CSS3的所有语法。但是，由于手机屏幕尺寸不一样，分辨率不一样，或者你需要考虑横竖屏的问题，这时候你也就不得不解决在不同手机上，不同情况下的展示效果了。

另外一点，UI一般输出的视觉稿只有一份，比如淘宝就会输出：750px 宽度的（高度是动态的一般不考虑）（详情），这时候开发人员就不得不针对这一份设计稿，让其在不同屏幕宽度下显示一致。

一致是什么意思？就是下面提到的几个主要解决的问题。
1.像素自适应问题
2.文字rem问题
3.高清图问题
4.1像素问题
5.横竖屏显示问题
6.手机字体缩放问题
在 1080px 的视觉稿中，左上角有个logo，宽度是 180px（高度问题同理可得）。
那么logo在不同的手机屏幕上等比例显示应该多大尺寸呢？
其实按照比例换算，我们大致可以得到如下的结果：
在CSS像素是 375px 的手机上，应该显示多大呢？结果是：375px * 180 / 1080 = 62.5px
在CSS像素是 360px 的手机上，应该显示多大呢？结果是：360px * 180 / 1080 = 60px
在CSS像素是 320px 的手机上，应该显示多大呢？结果是：320px * 180 / 1080 = 53.3333px

使用css的媒体查询 @media

@media only screen and (min-width: 375px) {
  .logo {
    width : 62.5px;
  }
}
 
@media only screen and (min-width: 360px) {
  .logo {
    width : 60px;
  }
}
 
@media only screen and (min-width: 320px) {
  .logo {
    width : 53.3333px;res
  }
}

使用rem单位

PC上最小 font-size=12
手机上最小 font-size=8
所以，大家在设置html的font-size的时候一定要保证最小等于8px！
因而为了解决这个问题，建议大家使用Sass这种Css开发语言，可以定义公式的，这样写css就方便了。
最终使用Sass的代码如下：


@media only screen and (min-width: 375px) {
  html {
    font-size : 375px;
  }
}
 
@media only screen and (min-width: 360px) {
  html {
    font-size : 360px;
  }
}
 
@media only screen and (min-width: 320px) {
  html {
    font-size : 320px;
  }
}
 
//定义方法：calc
@function calc($val){
    @return $val / 1080;
}
 
.logo{
	width : calc(180rem);
}

以上方案虽然解决了问题，但任然有以下缺陷：

不同的尺寸需要写多个 @media
依赖css的开发工具，比如：sass/less等
所有涉及到使用rem的地方，全部都需要调用方法 calc() ，这个也挺麻烦的。

js动态设置根字体

公式：

在CSS像素是 375px 的手机上，应该显示多大呢？结果是：375px * 180 / 1080 = 62.5px
在CSS像素是 360px 的手机上，应该显示多大呢？结果是：360px * 180 / 1080 = 60px
在CSS像素是 320px 的手机上，应该显示多大呢？结果是：320px * 180 / 1080 = 53.3333px

//获取手机屏幕宽度
var deviceWidth = document.documentElement.clientWidth;
 
//将方案二中的media中的设置，在这里动态设置
//这里设置的就是html的font-size
document.documentElement.style.fontSize = deviceWidth + 'px';

特别注意：
document.documentElement.clientWidth 这个语句能获取到的准确的手机尺寸的前提是建立在html中设置了如下标签：

<meta name="viewport" content="width=device-width">

文字rem问题

IOS 和安卓在input标签上之间存在问题

<input type=number> 在ios上可以改变键盘类型从而输入非数字(本来期望只能填入数字)

解决办法：1.如果只是输入整数的话可以使用<input type=tel>
2.如果需要带有小数的话，只能使用type=number然后在表单提交的时候对input的value值进行正则判断了。
3. <input type=number maxlength=5>当设置type=number时maxlength,minlength无效(仅限ios…)只能使用正则匹配。
4. input 的placeholder 偏上，同样仅限ios
5.
只要提示文字和输入文字一样大就没问题了

::-webkit-input-placeholder { /* WebKit, Blink, Edge */ 
    font-size:0.14rem;/*小于等于0.14rem即可*/
    color: #b2b2b2;
}