写一个h5页面

1.移动端的页面适应。在index.html文件里进行配置。

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <!-- <meta name="x5-fullscreen" content="true">

    <meta name="full-screen" content="yes"> -->

  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >  -->

  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">

  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />

  <meta http-equiv="Pragma" content="no-cache" />

  <meta http-equiv="Expires" content="0" />

  <meta name="format-detection" content="telephone=no" />

  <link rel="shortcut icon" href="//页面角标">

  <title>//页面名称</title>

  <script>

    var d = window.document.createElement('p');

    d.style.width = '1rem';

    d.style.display = "none";

    var head = window.document.getElementsByTagName('head')[0];

    head.appendChild(d);

    var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));

    (function (doc, win) {

      var docEl = doc.documentElement,

        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

        recalc = function () {

          var clientWidth = docEl.clientWidth;

          if (!clientWidth) return;

          docEl.style.fontSize = 100 * (clientWidth / 750) / (defaultFontSize / 16) + 'px';

        };

      var clientWidth = docEl.clientWidth;

      if (clientWidth)

        docEl.style.fontSize = 100 * (clientWidth / 750) / (defaultFontSize / 16) + 'px';

      if (!doc.addEventListener) return;

      win.addEventListener(resizeEvt, recalc, false);

      doc.addEventListener('DOMContentLoaded', recalc, false);

    })(document, window);

  </script>

</head>

<body onbeforeunload="beforeunloadHandler()">

  <div id="app"></div>

  <!-- built files will be auto injected -->

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容