html里面如何用JS判断浏览器宽度，根据宽度显示不同内容

我想在html页面用一段JS来判断当前页面宽度，大于或小于1280px时分别显示两段不同的html代码。不想用CSS来控制，所以不用跟我说CSS的方法，谢谢~

补充一下：

图片说明

我是想要在宽度大于等于1280px时，include其中一个head文件，小于1280px时，include hend2文件，这两个include代码前后不能再用div或者任何标签了，否则整个页面就变型了。

所以这个情况有没有解决办法呢？

// 获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
// 获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
// 通过深入 Document 内部对 body 进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}

做两个页面，一个叫做wide.html一个叫做standard.html
html里面放一个div作为内容的容器
<div id='container' />
代码如下

var windowSize=function () {
 var winWidth,winHeight;
 //获取窗口宽度
 if (window.innerWidth)
 winWidth = window.innerWidth;
 else if ((document.body) && (document.body.clientWidth))
 winWidth = document.body.clientWidth;
 //获取窗口高度
 if (window.innerHeight)
 winHeight = window.innerHeight;
 else if ((document.body) && (document.body.clientHeight))
 winHeight = document.body.clientHeight;
 //通过深入Document内部对body进行检测，获取窗口大小
 if (document.documentElement && document.documentElement.clientHeight &&document.documentElement.clientWidth)
 {
 winHeight = document.documentElement.clientHeight;
 winWidth = document.documentElement.clientWidth;
 }
 //返回对象结果
 return {'width':winWidth,'w':winWidth,'height':winHeight,'h':winHeight};
}

$(document).ready(function(){
if (windowSize().width > 1280)
$("container").load('wide.html');
else
$("container").load('standard.html');
}

<body>
    <div id="content"></div>
    </body>
  <script type="text/javascript">
    var width = document.body.clientWidth;
    var dom = document.getElementById('content')
    console.log(dom)
    if(width > 1280) {
      dom.innerHTML = '<p>代码1</p>'
    } else {
      dom.innerHTML = '<p>代码2</p>'
    }
  </script>

1、html和body宽度先设置为100%；
2、监听浏览器宽度变化

                            //加载页面时执行一次
                changeMargin();
                //监听浏览器宽度的改变
                window.onresize = function(){
                    changeMargin();
                };
                function changeMargin(){
                    //获取元素距离屏幕左边的距离
                    var divLeft = $('.news').offset().left;
                    //获取网页可见区域宽度
                    var docWidth = document.body.clientWidth;
                                        var dom = document.getElementById('content');//你要变化的区域
                                        var x = 1280;//x你根据自己的需求自己设置
                    if(docWidth <=x){
                                                var html='<p>a内容</p>';
                                                 dom.innerHTML =html;

                    }else{
                                        var html='<p>b内容</p>';
                                                 dom.innerHTML =html;
                                        }
                }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示</title>
</head>

<body>
    <div class="box">
        <div id="box_1">我在大于1280显示</div>
        <div id="box_2">我在小于1280显示</div>
    </div>
</body>
<script>
    // 页面初始化调用函数显示
    changeStatus();

    /**
     * @Date: 2020-06-24 14:55:43
     * @description: 监听页面宽度变化调用函数判断
     * @param {type} 
     */
    window.onresize = function () {
        changeStatus();
    };

    /**
     * @Date: 2020-06-24 14:56:05
     * @description: 判断页面宽度显示对应的内容
     * @param {type} 
     */
    function changeStatus() {
        // 获取当前页面的宽度
        var width = window.innerWidth;
        // 获取dom节点
        var box1 = document.getElementById("box_1");
        var box2 = document.getElementById("box_2");
        // 判断winth宽度
        if (width > 1280) {
            box1.style.display = "block";
            box2.style.display = "none";
        } else {
            box1.style.display = "none";
            box2.style.display = "block";
        }
    }
</script>

</html>

思路：
display控制显示哪块内容
1. 获取window尺寸，设置显示的内容
2.监听window resize事件，调整显示内容