react开发过程中的bug笔记（移动端篇）连载中

执剑、天涯

已于 2022-08-04 23:10:25 修改

阅读量389

点赞数

分类专栏： react开发文章标签： react.js web app

于 2021-12-03 00:17:40 首次发布

本文链接：https://blog.csdn.net/sincejuly1995/article/details/121689580

版权

react开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.移动端汉字正常自动换行，连续的数字和字母不自动换行的问题：

自动换行：

 div{
        word-wrap: break-word;
        word-break: normal;
           }

注：
(1).word-break:break-all：
例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长，它会把单词截断，变成该行末端为
conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了.

(2).word-wrap:break-word：
例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，
它会自动把整个单词放到下一行，而不会把单词截断掉的。

2.检测浏览器型号：

打印浏览器设备型号：
window.navigator.userAgent

function BrowserType(){
   var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
   var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
   // var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
   var isIE=window.ActiveXObject || "ActiveXObject" in window
   // var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判断是否IE的Edge浏览器
   var isEdge = userAgent.indexOf("Edge") > -1; //判断是否IE的Edge浏览器
   var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
   var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器
   var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1&&!isEdge; //判断Chrome浏览器
  
   if (isIE){
      var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
      reIE.test(userAgent);
      var fIEVersion = parseFloat(RegExp["$1"]);
      if(userAgent.indexOf('MSIE 6.0')!=-1){
        return "IE6";
      }else if(fIEVersion == 7)
        { return "IE7";}
      else if(fIEVersion == 8)
        { return "IE8";}
      else if(fIEVersion == 9)
        { return "IE9";}
      else if(fIEVersion == 10)
        { return "IE10";}
      else if(userAgent.toLowerCase().match(/rv:([\d.]+)\) like gecko/)){
            return "IE11";
        }
      else
        { return "0"}//IE版本过低
    }//isIE end
      
    if (isFF) { return "FF";}
    if (isOpera) { return "Opera";}
    if (isSafari) { return "Safari";}
    if (isChrome) { return "Chrome";}
    if (isEdge) { return "Edge";}
  }
  //myBrowser() end
  alert(BrowserType());

3.针对ios系统获取屏幕安全距离的方法：

//屏幕上安全距离: safe-area-inset-top
//屏幕右安全距离: safe-area-inset-right
//屏幕下安全距离: safe-area-inset-bottom
//屏幕左安全距离: safe-area-inset-left

//ios11
padding-bottom: constant(safe-area-inset-bottom);
//ios11.2以上
padding-bottom: env(safe-area-inset-bottom);

//最终兼容性写法：
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);