欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Javascript常见问题解决方法!

程序员文章站 2022-06-14 17:15:31
...

移动端兼容问题方案总结

  1. rem
/**
 * 以下这段代码是用于根据移动端设备的屏幕分辨率计算出合适的根元素的大小
 * 当设备宽度为375(iPhone6)时,根元素font-size=16px; 依次增大;
 * 限制当为设备宽度大于768(iPad)之后,font-size不再继续增大
 * scale 为meta viewport中的缩放大小
 */
(function(doc, win) {
    var docEl = win.document.documentElement;
    var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    /**
      * ================================================
      *   设置根元素font-size
      * 当设备宽度为375(iPhone6)时,根元素font-size=16px; 
      × ================================================
      */
    var refreshRem = function() {
        var clientWidth = win.innerWidth ||
            doc.documentElement.clientWidth ||
            doc.body.clientWidth;

        // console.log(clientWidth)
        if (!clientWidth) return;
        var fz;
        var width = clientWidth;
        fz = 16 * width / 375;
        docEl.style.fontSize = fz + 'px';
    };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, refreshRem, false);
    doc.addEventListener('DOMContentLoaded', refreshRem, false);
    refreshRem();

})(document, window);
  1. 淘宝解决方案
    https://github.com/amfe/lib-flexible
    Flexible会将视觉稿分成100份(主要为了以后能更好的兼容vhvw),而每一份被称为一个单位a。同时1rem单位被认定为10a
    使用方法:
  2. 引入两个文件
  3. px转换成rem

获取Cookie中指定键的值

    //获取cookie
    getCookie(cookie_name) {
      var allcookies = document.cookie;
      var cookie_pos = allcookies.indexOf(cookie_name); //索引的长度
      // 判断cookie是否存在,
      if (cookie_pos != -1) {
        // 把cookie_pos放在值的开始,只要给值加1即可。
        cookie_pos += cookie_name.length + 1; //这里容易出问题,所以请大家参考的时候自己好好研究一下
        var cookie_end = allcookies.indexOf(";", cookie_pos);

        if (cookie_end == -1) {
          cookie_end = allcookies.length;
        }
        var value = unescape(allcookies.substring(cookie_pos, cookie_end)); //这里就可以得到你想要的cookie的值了。。。
      }
      return value;
    },