首页 > 建站‧营销

判断浏览器宽度跳转不同的页面


判断浏览器宽度跳转不同的页面,代码如下:

<!-- 页面跳转 -->
	<script>
        var oWidth = document.documentElement.clientWidth || document.body.clientWidth;
        if (oWidth > 1200) {} else {
            window.location.href = "index.html";
        }
        window.addEventListener("orientationchange", function() {
            var oWidth = document.documentElement.clientWidth || document.body.clientWidth;

            if (oWidth > 1200) {

            } else {
                window.location.href = "index.html";
            }
        }, false);
        window.addEventListener("resize", function() {
            var oWidth = document.documentElement.clientWidth || document.body.clientWidth;
            if (oWidth > 1200) {} else {
                window.location.href = "index.html";
            }
        }, false);
    </script>
    
<script>
        var oWidth = document.documentElement.clientWidth || document.body.clientWidth;
        if (oWidth < 1200) {} else {
            window.location.href = "so.html";
        }
        window.addEventListener("orientationchange", function() {
            var oWidth = document.documentElement.clientWidth || document.body.clientWidth;

            if (oWidth < 1200) {

            } else {
                window.location.href = "so.html";
            }
        }, false);
        window.addEventListener("resize", function() {
            var oWidth = document.documentElement.clientWidth || document.body.clientWidth;
            if (oWidth < 1200) {} else {
                window.location.href = "so.html";
            }
        }, false);
    </script>

这段代码包含两个部分,分别是页面跳转到index.html和so.html。

第一个部分的作用是检测浏览器窗口的宽度是否大于1200像素,如果小于等于1200像素则跳转到index.html页面。

第二个部分的作用是检测浏览器窗口的宽度是否小于1200像素,如果大于等于1200像素则跳转到so.html页面。

这段代码还监听了窗口的旋转和调整大小事件,如果窗口宽度不符合要求,则同样进行页面跳转。

本文链接:https://zhanque.net/cms/3291.html