那些曾经遇到的问题点

一、常用 meta 标签的作用

H5 项目中可能用到的 <meta> 标签

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui,  viewport-fit=cover">
<!-- target-densitydpi=device-dpi 使用屏幕自带的dpi 不进行缩放 -->
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!--uc浏览器判断到页面上文字居多时，会自动放大字体优化移动用户体验。添加以下头部可以禁用掉该优化-->
<meta name="wap-font-scale" content="no">
复制代码

二、在微信中 audio 自动播放音乐

• 参考网址：www.zhihu.com/question/25…

• 之前 H5 中使用：

document.addEventListener('DOMContentLoaded', function () {
    function audioAutoPlay() {
        var audio = document.getElementById('bg-music');            
        audio.play();        
        document.addEventListener("WeixinJSBridgeReady", function () {            
            audio.play();        
        }, false);    
    }    
    audioAutoPlay();
});
复制代码

三、问题点汇总

• 1、弹性布局

  display：flex兼容的浏览器版本 IE 10+，Firefox 22+，Chrome 21+，Safira 6.1+，Opera 12.1+

  flex-wrap IE 11+，Firefox 28+，Chrome 29+，Safira 9+，Opera 17+

  目前没有找到解决flex-wrap兼容性的方法，建议：不使用弹性布局，给子元素添加 inline-block

• 2、多行文本溢出隐藏并将隐藏部分换成省略号

  • 单行溢出文本显示省略号

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  复制代码

  • 多行文本溢出显示省略号，webkit私有属性，仅支持webkit浏览器

  overflow: hidden;
  text-overflow: ellipsis;
  text-overflow: ellipsis-lastline;
  display: -webkit-box;
  -webkit-line-clamp: 2; /*需要显示的行数*/
  -webkit-box-orient: vertical;
  border: 1px solid #ddd;
  复制代码

• 3、背景色 在IE8的兼容性(包括渐变色)

  • 简单的透明度

    chrome && firefox background: #000; opacity: 0.5;

    IE8: filter:alpha(opacity=50);

  • 2、渐变的背景色 (下面的例子是水平方向的线性渐变)

    chrome && firefox && Trident background-image: -webkit-linear-gradient(0, #2babe0 33%, #1373bd 66%); background-image: -moz-linear-gradient(0, #2babe0 33%, #1373bd 66%); background-image: -o-linear-gradient(0, #2babe0 33%, #1373bd 66%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#2babe0, endColorstr=#1373bd); /IE<9>/ -ms-filter: progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#2babe0, endColorstr=#1373bd); /IE8+/

• 4、break & continue

  break 语句可跳出循环后，会继续执行循环之后的代码； break 不带标签引用时，只能用在循环或switch中； 在循环多，结构复杂的时候会用带标签的break，指定跳出js代码块(循环、if语句及代码块)。

  continue 语句中断循环中的迭代，若出现了指定条件，然后继续循环中的下一代迭代，且continue仅能用于循环中。

  break & continue 区别 :

  var x = 0;
  while(x++ < 10) {
      if(x == 3) {
          break;
      }
      console.log(x);
  }
  // 1,2
  
  var x = 0;
  while(x++ < 10) {
      if(x == 3) {
          continue;
      }
      console.log(x);
  }
  // 1,2,4,5,6,7,8,9,10
  复制代码

• 5、CSS3中的相邻兄弟选择器 + 方便之处

  选择当前类元素后相邻的其他兄弟元素，列表中只需要将每两个元素之间或者当前元素以后元素设置10px的间距/边框时(nth-child(n)不兼容IE8)

• 6、background-attachment

  设置背景图像是否固定或者随着页面的其余部分滚动的效果。

  scroll 默认值，背景图像会随着页面其余部分滚动 fixed 当页面的其余部分滚动时，背景图像不会移动 inherit 规定应该从父元素继承background-attachment属性的设置 (不兼容IE8) none | text | all | element 默认值 text 可以选择文本 none 文本不能被选择 all 当所有内容作为一个整体时可以被选择，如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。 element 可以选择文本，但是选择范围受元素边界约束 IE6-9不支持该属性，但支持使用标签属性 onselectstart="return false;" 来达到 user-select:none 的效果； Safari和Chrome也支持该标签属性；直到Opera12.5仍然不支持该属性，但和IE6-9一样，也支持使用私有的标签属性 unselectable="on" 来达到 user-select:none的效果；unselectable 的另一个值是 off；除Chrome和Safari外，在其它浏览器中，如果将文本设置为 -ms-user-select:none;则用户将无法在该文本块中开始选择文本。不过，如果用户在页面的其他区域开始选择文本，则用户仍然可以继续选择将文本设置为 -ms-user-select:none; 的区域文本；

• 7、自定义滚动条样式

/三角箭头的颜色/ scrollbar-arrow-color: #bbb; /滚动条滑块按钮的颜色/ scrollbar-face-color: #999; /滚动条整体颜色/ scrollbar-highlight-color: #999; /滚动条阴影/ scrollbar-shadow-color: #999; /滚动条轨道颜色/ scrollbar-track-color: #eee; /* 滚动条整体样式 */

div::-webkit-scrollbar {
    width: 6px; /* 高宽分别对应横竖滚动条的尺寸 */
    height: 1px;
}
/* 滚动条里面小方块 */
div::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: #999;
}
/* 滚动条里面轨道 */
div::-webkit-scrollbar-track {
    border-radius: 4px;
    background: #f2f2f2;
}
复制代码

• 8、parseInt(string, radix)

  string 必需。要被解析的字符串

  radix 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。 如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。 如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。

  返回解析后的数字。

• 9、RegExp对象的方法

  • test()

    检索字符串中的指定值，返回值是true或false var RegExp1 = new RegExp('e'); console.log(RegExp1.test('This is egg')); // true

  • exec()

    检索字符串中的指定值，返回值是被找到的值,返回一个数组，其中存放区配的结果，如果未找到区配，则返回值为null

    var str = "Visit W3School"; var patt = new RegExp("W3School","g"); console.log(patt.exec(str)); // W3School console.log(patt.lastIndex); // 14

  • compile()

    用于改变RegExp，既可以改变检索模式，也可以添加或删除第二个参数，存在返回 true,否则返回 false

    语法：RegExpObject.compile(regexp,modifier) regexp 正则表达式 modifier 规定匹配的类型。"g" 用于全局匹配，"i" 用于区分大小写，"gi" 用于全局区分大小写的匹配。

    通过 compile() 方法，改变正则表达式，用 "person" 替换 "man" 或 "woman"， var str="Every man in the world! Every woman on earth!"; patt=/(wo)?man/g; patt.compile(patt); str1=str.replace(patt,"person"); console.log(str1); //Every person in the world! Every person on earth!

• 10、Toast组件（react）

export let toastIt = function (text: string, timeout: number) {
    var timeout = timeout || 3000;
    let toast = document.createElement('DIV');    
    toast.classList.add('toast-it');
    let content = document
        .createTextNode(text);
    toast.appendChild(content);
    toast.style.animationDuration = timeout / 1000 + 's';

    document.body.appendChild(toast);
    setTimeout(
        function () {
        document.body.removeChild(toast);
        }, 
        timeout
    );
};
复制代码

/* toast 提示 */
.toast-box {
    width: 600px;
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translate(-50%, -80%); 
    animation-timing-function: ease-in;
    animation-duration: 3s;  
    animation-delay: 5s; 
    .toast {
        width: 120px;
        color: $color-white;
        padding: 10px 20px;
        text-align: center;
        background: #000;
        opacity: 0.5;
        filter: alpha(opacity = 50);
        margin: 0 auto;
    }
} 
@keyframes TOAST-APPEAR {
    0% {
        max-height: 0;
        top: 0;
        opacity: 0;
        filter: alpha(opacity = 0);
    }
    15% {
        max-height: 60px;
        top: 10px;
        opacity: 1;
        filter: alpha(opacity = 100);
    }
    80% {
        max-height: 60px;
        top: 45px;
    }
    100% {
        max-height: 60px;
        top: 50px;
    }
}
复制代码

• 11、页面间传值

  localStorage.setItem("user",JSON.stringify(data.allUser)); var user = JSON.parse(localStorage.getItem("user")); localStorage.removeItem("user");

  • 一个id值

  //将id保存在cookie
  $.cookie('doctorId', '11916111-f2eb-11e4-b756-f40669963d49');
  //从cookie中取出id
  var doctorId = $.cookie('doctorId');
  复制代码

  • 多个值

  //将多个值存放在对象中
  var userData = {
      userId: "11916122-f2eb-11e4-b756-f40669963d49",
      patientName: "张丽",
      patientAge: 23,
      patientSex: "F"
  }
  //将这个对象保存在cookie,它的键是对象名称，值为JSON.stirng()，目的是将这个对象解析为字符串，因为cookie的键与值都是字符串
  $.cookie('userData' , JSON.stringify(userData));
  
  var userData = $.cookie('userData');
  if(userData){
      //JSON.parse() 将字符串解析为对象，方便使用
      userData = JSON.parse(userData);
  };
  复制代码

• 12、IE中发生 line-height 属性的 bug

  发生情况:当在一个标签中套入img,input,textarea,select,object等元素的时候会发生.

  如在body中设置line-height:80px;然后body中<p>有文字有img,有input...这个bug就发生了,在ie下的line-height会缩小了,但在ff和opera是正常的,于是我们为了解决这个办法需要单独给ie设置样式;

  /* 简单的css样式 */
  body {
  	line-height: 80px;
  }
  *html img {
  	margin: 10 0; /* (line-height的高度-img的高度)/2px */
  	vertical-align: center;
  }
  *html input {
  	vertical-align: center;
  }
  复制代码

• 13、ios自带的上下滑动刷新页面

gearDateTouch.addEventListener('touchmove', function (event) {     
    event.preventDefault();
},false);
复制代码

• 14、css 解决 iOS 点击时 出现半透明的灰色背景

input, div, p, ul, li, span, textarea {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
复制代码

• 15、在通过以下属性实现 tab 左右切换时，ie8 中无法及时渲染，需在切换的事件中，提前给其的任意祖先元素添加类型进行渲染

  javascript$('.debit-note-rise').addClass('ie8-render');

  .note-rise-bar {
      width: 72px;
      height: 25px;
      position: absolute;
      top: 0;
      left: 0;
      line-height: 24px;
      -webkit-transition: left .15s ease-in;
      transition: left .15s ease-in;
      background: url(../img/hotel/note-rise-bg.png) no-repeat;
  }
  .note-rise-parent {
      height: 24px;
  }
  .note-rise-son {
      position: absolute;
      top: 0;
      left: 0;
  }
  .note-rise-parent[data-active-index="1"] .note-rise-bar {
      left: 73px;
  }
  复制代码

• 16、无论几行数据，都保证垂直方向居中显示

  父元素： display: table; height: 100px;

  子元素： display: table-cell; vertical-algin：middle;

• 17、jQuery 页面带锚点跳转

  var anchor = true;//初次进入时的锚点定位
  var roomEle = false;//判断房型列表子元素
  var commentEle = false;//判断点评列表子元素
  
      //页面加载 锚点定位
  function anchorPosition(anchor, listEle) {
      if(anchor && listEle) {
          var url = window.location.toString();
          var id = url.split('#')[1];
          //判断url中是否有锚点定位
          if (id) {
              var t = $('#' + id).offset().top;
              $(window).scrollTop(t);
              anchor = false;
          }
      } 
  }
  
  //判断点评列表子元素 页面加载锚点定位
  commentEle = ($('.hotel-detail-discuss .comments-detail > div').length != 0);
  anchorPosition(anchor, commentEle);
  
  //判断房型列表子元素 页面加载锚点定位
  roomEle = ($('#hotel-room-list > ul').length != 0 || $('#hotel-room-list > div').length != 0);  
  anchorPosition(anchor, roomEle);
  
  //清除筛选项模块
  $("#clear-condition").live("click", function () {
          _clearCondition();
      queryRoomList();
      anchor = false;//避免页面再次自动锚点定位
  });
  
  
  var thisID = window.location.hash;
  var mao = $('#hotel-comment');
  if(thisID == '#hotel-comment') {
      var pos = mao.offset().top;
      $('html, body').animate({scrollTop: pos}, 100);
  }
  复制代码

• 18、 iPhoneX中的安全区域全覆盖，在 meta 标签中添加 viewport-fit=cover

  auto： 默认 viewprot-fit:contain; 页面内容显示在 safe area 内 cover： viewport-fit:cover,页面内容充满屏幕

  当我们设置 viewport-fit:cover 时：设置如下

  body {
      padding-top: constant(safe-area-inset-top);   /* 为导航栏+状态栏的高度 88px */          
      padding-left: constant(safe-area-inset-left);   /* 如果未竖屏时为0 */               
      padding-right: constant(safe-area-inset-right); /* 如果未竖屏时为0 */              
      padding-bottom: constant(safe-area-inset-bottom);/* 为底下圆弧的高度 34px */      
  }
  复制代码

• 19、在react+typescript中定时器的使用

  private timer: number; TypeScript 在 setTimerOut 中的定义成 number,在 setTimerOut 前添加 window.setTimerOut

• 20、定时隐藏某元素

  componentDidMount() {
      this.showSaveCover();
  }
    
  showSaveCover() {
      this.setState({
          isWarning: true
      });
      this.hideSaveCover();
  }
  
  hideSaveCover() {
      var self = this;  
      if (this.timer) {
          clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
          self.setState({
          isWarning: false
          });
      }, 1000);
      clearTimeout(this.timer);
  }
  复制代码

• 21、ref 的使用与定义

  detailInfo: HTMLTextAreaElement ref={(input) => { this.detailInfo = input; }} this.detailInfo.focus();

• 22、渐变色

  /* Safari 5.1 - 6.0 / background: -webkit-linear-gradient(#04091b 50%, #3d4c5b); / Opera 11.6 - 12.0 / background: -o-linear-gradient(#04091b 50%, #3d4c5b); / Firefox 3.6 - 15 / background: -moz-linear-gradient(#04091b 50%, #3d4c5b); / 标准的语法（必须放在最后）*/ background: linear-gradient(#04091b 50%, #3d4c5b);

• 23、水平垂直居中对齐

  • 方式一

  .parent {
      position: relative;
  }
  .targetElm {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  复制代码

  • 方式二

  .parent {
      position: relative;
  }
  .targetElm {
      position: absolute;
      margin: auto;
      width: 100px;
      height: 50px;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
  }
  复制代码

  • 方式三

  .parent {
      display: table;
      width: 100%;
      height: 50px;
  }
  .son {
      display: table-cell;
      vertical-align: middle;
  }
  复制代码

  • 方式四

  .parent {
      display: flex;
  } 
  .son {
      margin: auto;
  }
  复制代码

  或

  .parent {
      display: flex;
      justify-content: center;
      align-items: center;
  }
  复制代码

  或

  .parent {
      display: flex;
      justify-content: center;
  }
  .son {
      align-self: center;
  }
  复制代码

• 24、placeholder 颜色

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: $placeholder;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
    color: $placeholder;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: $placeholder;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: $placeholder !important;
}
复制代码

• 25、input 标签 autocomplete 属性

清除 input 框在页面中输入之后产生的历史记录,将 autocomplete 中的默认值 on 改成 off 即可

• 26、input text select() 方法

select() 方法用于选取文本域中的内容 所有主流浏览器都支持 select() 方法 textObject.select()

选取文本域的内容：

<input type="text" id="copyText" value="需要复制的内容">
<button type="button" onClick="handleClick()">复制</button>
<script>
    function handleClick() {
        document.getElementById("copyText").select();
        document.execCommand('copy');
    }
</script>
复制代码

• 27、video视频全屏播放

export default {
    // 进入全屏
    launchFullscreen: function(element) {
        //此方法不可以在異步任務中執行，否則火狐無法全屏
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) { 
            element.msRequestFullscreen(); 
        } else if (element.oRequestFullscreen) {
            element.oRequestFullscreen();
        }
        else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullScreen();
        } else {
            var docHtml = document.documentElement;
            var docBody = document.body;
            var videobox = document.getElementById('videobox');
            var cssText = 'width:100%;height:100%;overflow:hidden;';

            docHtml.style.cssText = cssText;
            docBody.style.cssText = cssText;
            videobox.style.cssText = cssText + ';' + 'margin:0px;padding:0px;';
            document.IsFullScreen = true;
        }
    },
    // 退出全屏
    exitFullscreen: function(element) {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.oRequestFullscreen) {
            document.oCancelFullScreen();
        }else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else {
            var docHtml = document.documentElement;
            var docBody = document.body;
            var videobox = document.getElementById('videobox');

            docHtml.style.cssText = "";
            docBody.style.cssText = "";
            videobox.style.cssText = "";
            document.IsFullScreen = false;
        }
    }
}
复制代码

• 28、--save 与 –save-dev 的区别

-save-dev 是指将包信息添加到 devDependencies，表示你开发时依赖的包裹。

-save 是指将包信息添加到 dependencies，表示你发布时依赖的包裹。

例如，我们在开发时会用到 gulp 来压缩我们的文件。这是我们的 gulp 包信息就会添加到 devDependencies，我们在发布时发布压缩文件，并不要用到 gulp。 利用 nodejs 构建的服务器在发布后会经常被访问用到，http包的信息就会添加到 dependencies 区域。

• 29、vue 中页面导出成图片

<!-- 图表导出 -->
<div class="plOverview-subTitle">
    <span class="chart-export" @click="screenshots()">图表导出</span>        
</div>
<!-- 需要打印的区域 -->
<div class="row" ref="copyCardArea" id="copyCardArea"><div>

import $ from "jquery";
import html2canvas from "html2canvas";

// 页面指定区域导出成图片
screenshots() {
    let b64;
    html2canvas(this.$refs.copyCardArea, {
      	useCORS: true
    }).then(canvas => {
        try {
            b64 = canvas.toDataURL("image/png");
            var triggerDownload = $("#tttt").attr("href", b64).attr("download", "order-1111111111.png");
            triggerDownload[0].click();                    
         } catch (err) {
             alert(err);
          }
          this.imgUrl = b64;
    });
}
复制代码

• 30、vue 中将页面导成 pdf

htmlToPdf.js

import html2Canvas from 'html2canvas';  
import JsPDF from 'jspdf';  
export default{  
    install (Vue, options) {  
        Vue.prototype.getPdf = function () {  
            var title = this.htmlTitle;  
            html2Canvas(document.querySelector('#pdfDom'), {  
                allowTaint: true  
            }).then(function (canvas) {  
                let contentWidth = canvas.width; 
                let contentHeight = canvas.height;  
                let pageHeight = contentWidth / 592.28 * 841.89;  
                let leftHeight = contentHeight;  
                let position = 0;  
                let imgWidth = 595.28;  
                let imgHeight = 592.28 / contentWidth * contentHeight;  
                let pageData = canvas.toDataURL('image/jpeg', 1.0); 
                let PDF = new JsPDF('', 'pt', 'a4');  
                if (leftHeight < pageHeight) {  
                    PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);  
                } else {  
                    while (leftHeight > 0) {  
                        PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight); 
                        leftHeight -= pageHeight;  
                        position -= 841.89;  
                        if (leftHeight > 0) {  
                            PDF.addPage();  
                        }  
                    }  
                }  
                PDF.save(title + '.pdf');  
            })  
        }  
    }  

}  
复制代码

Main.js

import htmlToPdf from './htmlToPdf';
Vue.use(htmlToPdf); // 将页面导出成pdf文件

在页面中使用
data: function(){
    return {
    	htmlTitle:"qwerdf",  //这个是pdf文件的名字
}
}
<!-- 图表导出 -->
<div class="plOverview-subTitle">
<span class="chart-export" @click="getPdf()">图表导出</span>        
</div>
<!—页面导出区域 -->
<div class="row" id="pdfDom">
复制代码

• 31、判断访问终端

  • 方法一：罗列

  var browser = {
      versions: function() {
          var u = navigator.userAgent, app = navigator.appVersion;
  
          return {
              trident: u.indexOf('Trident') > -1, //IE内核
              presto: u.indexOf('Presto') > -1, //opera内核
              webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
              gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
              mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
              ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
              android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
              iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
              iPad: u.indexOf('iPad') > -1, //是否iPad
              webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
              weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
              qq: u.match(/\sQQ/i) == " qq" //是否QQ
          };
      }(),
      language: (navigator.browserLanguage || navigator.language).toLowerCase()
  }
  复制代码

  • 方法二： 简易版本

  if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
      console.log(navigator.userAgent);  
      // window.location.href ="iPhone.html";
  } else if (/(Android)/i.test(navigator.userAgent)) {
      console.log(navigator.userAgent); 
      // window.location.href ="Android.html";
  } else {
      console.log(navigator.userAgent); 
      // window.location.href ="pc.html";
  };
  复制代码

  • 方法三：判断是否手机端访问

  var userAgentInfo = navigator.userAgent.toLowerCase();
  var Agents = ["android", "iphone",
  "symbianos", "windows phone",
  "ipad", "ipod"];
  var ly = document.referrer; // 返回导航到当前网页的超链接所在网页的URL
  for (var v = 0; v < Agents.length; v ++) {
      if (userAgentInfo.indexOf(Agents[v]) >= 0 && (ly == "" || ly == null)) {
          this.location.href='http://m.***.com'; //wap端地址
      }
  }
  复制代码

  • 方法四：iOS或Android客户端

  var u = navigator.userAgent;
  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; // android终端
  var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
  复制代码

• 32、手机中某文字字体大小需要小于12px，可将其放大指定大小的两倍，再使用 transform scale 缩放 0.5

  -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0;