zoukankan      html  css  js  c++  java
  • 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>
    用IE6的以后吃方便面都没有调料包!!!
  • 相关阅读:
    Codeforces Round #622 (Div. 2)
    Knapsack Cryptosystem 牛客团队赛
    HDU 2586(LCA欧拉序和st表)
    P3865 【模板】ST表
    P2023 [AHOI2009]维护序列 区间加乘模板
    P1558 色板游戏 线段树(区间修改,区间查询)
    Codeforces Round #621 (Div. 1 + Div. 2) D
    Codeforces Round #620 (Div. 2) E
    Educational Codeforces Round 82 (Rated for Div. 2)
    洛谷P1638 逛画展
  • 原文地址:https://www.cnblogs.com/H5C3XXN/p/7372620.html
Copyright © 2011-2022 走看看