使用js方法根据显示屏幕大小确定展示手机版网站或者电脑版网站

　　实现根据屏幕大小的显示不同版本类型的网站，这属于自适应布局或者响应式布局的范畴；

　　自适应布局通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面；响应式布局通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。

　　响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。换句话说就是一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。

　　这里我们主要说明js方法实现屏幕设备大小，展示不同终端的版本；首先，需要准备两套或者多套代码版本，其中除了页面布局之外其他的设置（访问方式基本完全一致），分别建立两个或者多个文件夹；这里主要以电脑端网站与手机端网站距离说明；电脑端网站放置于根目录，

　　同时建立为m的文件夹，放入已设置好的手机版网站；在手机端头部<head>区域中加入如下代码：

　　

<script type="text/javascript">
        var autoRedirect = function () {
            var w = window.screen.width;
            if (parseInt(w) > 960（设备宽度可以自定义） && location.href.indexOf("/m（此处为目录名，按自己设置的来）/") > 0) {
                location.href = location.pathname.replace("/m/", "/");
            }
        };

        autoRedirect();
        window.onresize = function () {
            autoRedirect();
        };

    </script>

　　在电脑端头部<head>区域中加入如下代码（两段代码作用基本上一致，简单说就是重定向）：

<script type="text/javascript">
        var autoRedirect = function () {
            var w = window.screen.width;
            if (parseInt(w) < 960 && location.href.indexOf("/m/") < 0) {
                location.href = "/m" + location.pathname;
            }
        };
        autoRedirect();
        window.onresize = function () {
            autoRedirect();
        };
    </script>

使用以上方法就可以实现想要的效果了；作者文笔功底有点差，还是希望可以帮到大家。

posted @ 2020-01-03 15:12  hooks  阅读(788)  评论(0)  编辑  收藏  举报