前端自适应适配规则

缺乏、安全感 2022-10-22 09:12 141阅读 0赞

## 前端自适应适配规则 ##

[felx兼容性问题][felx]  
最重要一点

> 再次实践证明，当父元素为display:flex，子元素为position:absolute时。在苹果6s/6P（ios10）的系统下会出现兼容问题，子元素无法居中。所以当子元素要用position:absolute，父元素不能是flex布局。否则会出现兼容问题（chrome开发工具测不出问题，真机才能测出问题）

#### 首先通用文件适配器 ####

等于屏幕宽度除以设计搞宽度\*100除以16  
在这里我一个一个解释

> 首先1.屏幕宽度等于你当前的屏幕宽度  
> 2.设计搞宽度取决与你的ui宽度 ，我的ui给我的是640px  
> 3.乘以100 很多人就很离谱这个都不解释，你还写个锤子博客，100是你的基准值，也就是你使用的切图工具的基准值，一般这个是可以自己设置的不是死的，打个比方，ui给你的设计搞是640px，设置基准值为100之后应该是6.4rem  
> 4.除以16就是你的字体，浏览器默认字体大小  
> 最终实现效果

@charset "utf-8";
    html,
    body { 
      width: 100%;
      height: auto;
      margin: 0 auto;
      font-family: "宋体";
      font-size: 16px;
      -webkit-text-size-adjust: none;
    }
    
    html { 
      font-size: 16px !important;
      //初始字体大小,我的设计稿是640px,基准值是100
    }
    
    @media only screen and (min-width: 320px) { 
      html { 
        font-size: 312.5% !important;//320/640*100/16
      }
    }
    
    @media only screen and (min-width: 360px) { 
      html { 
        font-size: 351.56% !important;//同理360/640*100/16
      }
    }
    
    @media only screen and (min-width: 375px) { 
      html { 
        font-size: 366.21% !important;
      }
    }

这已经很详细了，实在不懂得可以留言  
在解释一下`-webkit-text-size-adjust: none;`

> \-webkit-text-size-adjust的用法如下：  
> `1、`当样式表里font-size<12px时，中文版chrome浏览器里字体显示仍为12px，这时可以用  
> html\{-webkit-text-size-adjust:none;\}  
> 顾名思义, 禁用Webkit内核浏览器的文字大小调整功能。  
> 如果要打开缩放功能,则定义下面的全局样式：  
> \*\{-webkit-text-size-adjust:auto !important;\}  
> `2、`\-webkit-text-size-adjust放在body上会导致页面缩放失效  
> `3、`body会继承定义在html的样式  
> `4、`用-webkit-text-size-adjust不要定义成可继承的或全局的

<!DOCTYPE html
      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    //这上面具体什么用我也不知道，公司前辈留下的，可以自行百度
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover">
        //其实在这里就已经禁止缩放了所以我也不知道上面那个-webkit-text-size-adjust:auto !important;有没有用，两个都写总不会错的
        //viewport-fit=cover 这个属性是用来消除苹果头部导航的，我试过了没效，但还是写出来各位小伙伴可以尝试以下
      <meta name="format-detection" content="telephone=no,date=no,address=no,email=no,url=no" />
    
      <title></title>
      <link rel="stylesheet" type="text/css" href="./css/base.css" />
      <link rel="stylesheet" type="text/css" href="./css/common.css">
      <link rel="stylesheet" href="./css/index.css">
      <script src="js/vue.js"></script>
      <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    </head>

#### 最后总结兼容性（iOS，Android） ####

1.先上模板

2.禁止复制、选中文本

.el { 
      -webkit-user-select: none;
      -moz-user-select: none;
      -khtml-user-select: none;
       user-select: none;
    }

3.苹果手机固定定位有bug 检查html和body是不是设置了overflow-x:hidden; 给不同屏幕大小的手机设置特殊样式  
`max-device-width`真实的设备宽度

@media only screen  and (min-device-width : 320px)  and (max-device-width : 375px){ }

4.IOS中input键盘事件keyup、keydown、keypress支持不是很好, 用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中用输入法输入之后，并未立刻相应keyup事件，只有在通过删除之后才可以响应

5.方法：可以用html5的oninput事件去代替keyup
    
    <input type="text" id="testInput">
    <script type="text/javascript">
      document.getElementById('input').addEventListener('input', function(e){ 
        var value = e.target.value;
      });
    </script>

6.ios 设置input 按钮样式会被默认样式覆盖

解决方式如下：
    input,textarea { 
      border: 0;
      -webkit-appearance: none;
    }

7.消除 IE10 里面的那个叉号:  
input:-ms-clear\{display:none;\}

8.手机上的flex布局时会有兼容性问题，只用新版本的会出现安卓手机不识别的现象 flex布局对于低版本的安卓，不支持flex-wrap:wrap属性，但是ios系统支持换行属性，这个时候如何解决呢？当然是不使用换行，用其他方式代替。

.box{ 
        display: -webkit-box; 
        /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
        display: -moz-box; /* 老版本语法: Firefox (buggy) */
        display: -ms-flexbox; /* 混合版本语法: IE 10 */
        display: -webkit-flex; /* 新版本语法: Chrome 21+ */
        display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
    }

9.input 的placeholder属性会使文本位置偏上

line-height: （和input框的高度一样高）---pc端解决方法
    line-height：normal ---移动端解决方法
    input type=number之后，pc端出现上下箭头
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0;
    }

10.实现android和ios系统手机打开相机并可选择相册功能

<input class="js_upFile cover1" type="file" name="cover" accept="image/*" capture="camera" multiple/>
    
    $(function () {
        //获取浏览器的userAgent,并转化为小写
        var ua = navigator.userAgent.toLowerCase();
        //判断是否是苹果手机，是则是true
        var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
        if (isIos) {
            $("input:file").removeAttr("capture");
        };
    })

11.移动端 HTML5 audio autoplay 失效问题  
这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。

解决方法思路：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。

解决代码：

document.addEventListener('touchstart',function() {
      document.getElementsByTagName('audio')[0].play();
      document.getElementsByTagName('audio')[0].pause();
    });

12.移动端点透问题

touchstart 早于 touchend 早于click。 亦即click的触发是有延迟的，这个时间大概在300ms左右，也就是说我们tap触发之后蒙层隐藏， 此时 click还没有触发，300ms之后由于蒙层隐藏，我们的click触发到了下面的a链接上。
    解决：
    
    1.尽量都使用touch事件来替换click事件。例如用touchend事件(推荐)。
    2.用fastclick，https://github.com/ftlabs/fastclick
    3.用preventDefault阻止a标签的click
    4.延迟一定的时间(300ms+)来处理事件 （不推荐）
    5.以上一般都能解决，实在不行就换成click事件。
    下面介绍一下touchend事件，如下：
    
    $("#haorooms").on("touchend",function(event) { 
       event.preventDefault();
     });

[felx]: https://blog.csdn.net/weixin_35698659/article/details/113072179