前端 - 判断当前是手机还是电脑，显示两种页面

问题描述

问 题

目前的项目是单页面的，但是项目中以一部分是需要区分电脑还是手机的。
我判断好了，只是在手机端的时候，我需要将导航和菜单公用的部分，消除，然后将手机端的页面渲染出来。我直接用的document.body.innerHTML="";这样写的，可是清空了文档中的全部元素之后，可是渲染页面不对了。想问下为什么？
代码：

            var sUserAgent = navigator.userAgent.toLowerCase();
            var pc=sUserAgent.match(/windows/i) == "windows";
            if(pc){
                console.log('当前是pc');
                var tt=_this.template;
            }else{
                console.log('当前是phone');
                document.body.innerHTML="";
                var tt=_this.templateT;  
            }
            //渲染页面
            api.content.data.query({
                data : {
                    dataid : this.dataid,
                    moduleId : _this.module.id,
                    addPageview : true
                },
                success : function(result) {
                    if (result.data) {
                        _this.$el.html(tt({
                            data : result.data,
                            module : _this.module,
                            pageIndex : _this.pageIndex
                        }));
                        // 视频处理为html video标签直接播放
                        var $embeds = _this.$('embed');
                        if ($embeds.length > 0) {
                            $embeds.each(function() {
                                var $e = $(this), $video = $('<video controls>').attr('width', $e.attr('width')).attr('height', $e.attr('height')).attr('src', $e.attr('src'));
                                if ($e.attr('autostart') == 'true') {
                                    $video.attr('autoplay', '');
                                }
                                $e.replaceWith($video);
                            });
                        }
                        document.title="IP ONLINE"+result.data.title;
                        var $config = {
                            title               : result.data.title, // 标题，默认读取 document.title 或者 <meta name="title" content="share.js" />
                            description         : result.data.summary, // 描述, 默认读取head标签：<meta name="description" content="PHP弱类型的实现原理分析" />
                            sites               : ['qzone', 'qq', 'weibo','wechat', 'douban'], // 启用的站点
                        };
                        _this.$('#share-1').share($config);
                        
                        // 渲染上一篇
                        _this.renderPrevious();
                        // 渲染下一篇
                        _this.renderNext();
                    } else {
                        _this.$el.html('指定的数据不存在或已被删除!');
                    }
                }
            });

解决方案

方向错误, 请使用css media query 只需要调整css样式让屏幕宽度小于768px的时候隐藏一部分页面内容就可以了, 搜索css media query, css响应式布局等关键字. 768, 992, 1200这几个关键的像素值来自bootstrap框架.

这篇关于前端 - 判断当前是手机还是电脑，显示两种页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！