js实现适配不同的屏幕大小

1.首先先了解几个事件：

　　orientationchange：在用户水平或者垂直翻转设备（即方向发生变化）时触发的事件。

　　　　　　　　　　　　 $(window).on("orientationchange",function(event){...})必须。指定 orientationchange 事件触发后执行的函数。

　　　　　　　　　　　　要确定设备按哪个方向旋转，您可以访问方向属性 orientation ，属性值可以是 "portrait（纵向）" 或者 "landscape（横向）"。

• • • • 　　Portrait = 设备在纵向位置旋转
      • 　　Landscape = 设备在横向位置旋转

 　　DOMContentLoaded ：判断DOM是否加载完毕

　　　　　　　　　　　　　　尽管这个事件会冒泡到window，但它的目标实际上是document;

　　　　　　　　　　　　　　IE9+、Firefox、Chrome、Safari 3.1+和Opera 9+都支持DOMContentLoaded 事件

 

下面是JS适配代码:

　　

<script type="text/javascript">
        (function (doc, win) {
          var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) return;
              // 根据设备的比例调整初始font-size大小
              if(clientWidth>640) clientWidth = 640;
              docEl.style.fontSize = 50 * (clientWidth / 320) + 'px';
            };
          if (!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>