移动端兼容问题杂记

1,527 阅读3分钟

移动端兼容适配问题杂记

兼容适配问题是前端开发经常面对的,以下来源于个人开发中的见解,若有不对的地方,非常欢迎指正,下面直接进入正题。

1. iPhoneX适配

接触过移动端开发的同学对iPhoneX适配应该不陌生,头部刘海(44) + 底部手势区域(34)是我们需要适配的区域,适配的方案有多种,本人更喜欢js方式,所以这里只介绍js适配。js方案的好处是灵活,当判断出是需要做适配的机型,那时你想如何调整都可以。

适配前看一下需要适配的机型,目前主要需要适配的机型如下,当前iPhoneX是经典375x812,必然要做适配的,所以下图没有出现

{
    const UA = window.navigator.userAgent
    return (UA.indexOf("iPhone OS") > -1 && (
        375 === screen.width && 812 === screen.height 
        || 414 === screen.width && 896 === screen.height 
        || 390 === screen.width && 844 === screen.height 
        || 428 === screen.width && 926 === screen.height
        ))
}

2. ios 电话号码智能识别蓝色展示

ios 智能识别手机号码,虽然这个功能很实用,但有时却也并不想要。我在开发中第一次就遇到了令人头疼的现象,那就是手机号码有时能智能识别以蓝色展示,有时则是以我自己设置的颜色展示,具体原因下面会提到,不过当时真的有点怀疑人生了。

通用方案,在meta标签里加入 content="telephone=no"

<meta name="format-detection" content="telephone=no" />
  • iphone 某些机型即使进行了如上设置,可能还是会识别到电话号码,以蓝色展示
  • 网络状况良好,会识别到电话号码,会以蓝色展示;网络状况不好,则不能识别,以设置的颜色展示

最终解决

<a href="tel:4008400006">客服电话: 4008400006</a>

a[href^="tel"] {
    color: inherit; // 设置自己的颜色
    text-decoration: none;
}

3. 图片间缝隙问题

解决: 图片的父元素设置 font-size: 0;

4. font-weight不生效

font-weight: 600 在一些机型字体不加粗问题,原因在于Android 一些机型是700开始认为加粗,用font-weight: bold 来代替。

5. i 标签引发的惨案

ios 微信环境中 使用i标签会出现样式bug,即使css去掉i标签的属性,也会出现字体倾斜,块与块之间产生缝隙,这里只能说用其他标签代替一下,可能会有更好的解决方法。

6.font-size 小于12px 文字垂直居中

大多数浏览器font-size 有一个最小值 12px(可能限制不一样),低于 12px 的,一律按 12px 显示。当然,我们用到小于12px字体时可以进行缩放。如上图,这种标签文字的垂直居中在一些浏览器中遇到font-size 小于12px 的时候就会出现图片的现象,即使使用flex布局,以及padding方案都不能达到居中的效果,这时缩放也是一种方案,position也是一种方案。但是,如果我们的设计非常好说话可以修改字体大小那就太棒了,出于个人看法没必要因为这个小标签费太大的劲。