pc端页面和移动端页面整合，在不修改代码的前提下，js整合代码

最新推荐文章于 2023-04-14 15:04:05 发布
最新推荐文章于 2023-04-14 15:04:05 发布
阅读量441 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaolei1888/article/details/103526614
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>贝克抑郁量表（BDI）</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1378642_3ppc8yarv3d.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1399110_vo7l0kwd1wb.css">
    <link rel="stylesheet" href="./report/css/style.css">
    <script src="./report/js/jquery1.10.js"></script>
    <script src="./report/js/jquery1.7.js"></script>
    <script src="./report/js/jquery1.8.js"></script>
    <script src="./report/appJs/flexible.js"></script>
    <script src="./report/js/modernizr.js"></script>
    <script src="./report/js/angular.min.js"></script>
    <script src="./report/js/angular-sanitize.min.js"></script>

<style>
    .contain{display: none;}
    @media screen and (max-width: 640px) {
    .box{display: none}
    .contain{display: block}
   }

</style>


</head>
<body >
<div  ng-app="myApp" ng-controller="myCtrl" ng-init="init()">
<!--pc端-->
<div class="box"  >
    <p class="result">
        <i class="red" >陈成成</i>的测评结果
    </p>
    <div class="lift-target">
        <div class="t1">
            <div class="eva-noe">
                <div class="eva-header">{{epname}}的测试结果</div>
                <p class="eva-text">{{introduction}}</p>
                <div class="eva-bak">贝克抑郁量表（BDI）的测试结果</div>
                <div class="eva-tu" >
                    <div ng-repeat="(index,laing) in standard;">
                        <div class="ft" ng-class="'laing-'+(index+1)">
                            <p >{{laing.condition}}({{laing.result}})</p>
                        </div>
                    </div>

                </div>
                <div class="fraction">
                    <p class="fra-title">
                        3.&nbsp;&nbsp;{{condition}}
                    </p>
                    <p class="fra-text">
                        {{result}}
                    </p>
                </div>
            </div>
        </div>
        <div class="t2">
            <div class="eva-bak">专家指导</div>
            <p class="eva-ti">{{guidance}}</p>
            <a href="url" class="dis">
                <div class="eva-play">
                    <p class="play-shi">
                     <i class="iconfont icon-bofang" >
                        </i>

                    </p>
                    <p class="play-title">{{title}}</p>
                </div>
            </a>
        </div>
        <div class="t3">
            <div class="eva-bak">自我疗愈</div>
            <div ng-repeat="self in selfhealing" class="fonts">
                <p>{{self.title}}</p>
                <p>{{self.content}}</p>
            </div>


        </div>
        <div class="t4">
            <div class="eva-bak">音乐放松</div>
            <div>
                <a href="{{yinUrl}}" class="dis">
                    <div >
                        <img src="{{yinImage}}">
                    </div>
                </a>
            </div>
            <ul id="playlist">{{overview}}</ul>

        </div>
        <div class="t5">
            <div class="eva-bak">求助渠道</div>
            <!--   机构-->
            <p class="area" ng-if="hotline">
                <span class="noi">热线</span>
                <div ng-repeat=" hot in hotline"  style="font-size: 16px">
                  <span>{{hot.name}}{{hot.phone}}</span>
                </div>
            </p>
            <p class="area" ng-if="institution">
                <span class="noi">求助机构</span>
                当您发觉您
                <span class="noi">求助医院</span>
                如果显示结果较为严重
            </p>
            <ul class="statistics" ng-if="institution" ng-repeat="inst in institution"  style="float: left;!important;">
                <a href="javascript:;">
                    <li class="sta-child">
                        <p class="sta-img"><img ng-src="{{inst.image}}" alt="{{inst.url}}"></p>
                        <p class="sta-child-intr">{{inst.name}}</p>
                    </li>
                </a>
            </ul>
            <ul class="statistics" ng-if="institution" ng-repeat="hos in hospital"  style="float: left;!important;">
                <a href="javascript:;">
                    <li class="sta-child">
                        <p class="sta-img"><img ng-src="{{hos.image}}" alt="{{hos.url}}"></p>
                        <p class="sta-child-intr">{{hos.name}}</p>
                    </li>
                </a>
            </ul>

        </div>
        <div class="t6" style="clear:both;!important;">
            <div class="eva-bak">免责声明</div>
            <p class="statementPC">
                由于个人心理特征的复杂性以及周围环境的多变性，本报告中所建议的方法并不具有普遍适用性，对个人产生的效果也因人而异。请根据个人心理特点并结合实际情况选择最合适的方法。
            </p>
            <div class="outshou" id="btn">回到首页</div>
        </div>
    </div>
    <div class="lift-nav">
        <ul class="lift">
            <li>测试结果</li>
            <li>专家指导</li>
            <li>自我疗愈</li>
            <li>音乐放松</li>
            <li>求助渠道</li>
        </ul>
    </div>
</div>
<!--app端-->
<div class="contain" >
    <p class="name">
        —&nbsp;&nbsp;<span class="objname">成成成</span>的测试成果&nbsp;&nbsp;—
    </p>
    <div class="title">{{epname}}（BDI）</div>
    <div class="description">
        <p class="des">
            <span class="des-tel">量表简介:</span>{{introduction}}
        </p>
        <p class="des">
            <span class="des-tel">特别强调:</span>基于人的心理特征的复杂性，以及该测评本身信效度的局限性，该测评结果只是参考，不能以此作诊断。
        </p>
    </div>
    <div class="echart">
        <p class="puc">您的测试结果如下：</p>
        <p class="puc op">{{condition}}</p>
        <!--        <p class="puc"><span class="puc-blod">轻度焦虑</span></p>-->
        <p class="puc"><span  class="puc-blod">结果提示</span>：你的测验结果为存在轻度焦虑。你在最近一段时间里心境状态略为紧张，这样的状态偶尔会对生活产生影响，需要适宜地放松自己。</p>
        <p class="puc"><span  class="puc-blod">建议</span>：你有时会产生焦虑感觉，但与此同时，你也要认识到，适度的焦虑是人生存和发展所不可或缺的。。</p>
    </div>
    <div class="expert">
        <div class="ex-tel">
            专家指导
        </div>
    </div>
    <div class="play">
        <p class="play-text">
            {{guidance}}
        </p>
        <p class="videos">
            <video controls style="width: 100%; height: 100%;max-height:720px; background-color: rgb(0, 0, 0);">
                <source src={{url}} />
            </video>
        </p>
    </div>
    <div class="expert">
        <div class="ex-tel">
            自我疗愈
        </div>
    </div>

    <div ng-repeat="sel in selfhealing" class="play-text">
        <p>{{sel.title}}</p>
        <p>{{sel.content}}</p>
    </div>
    <div class="yinyue">
        <div class="expert">
            <div class="ex-tel">
                音乐放松
            </div>
        </div>
        <div>
            <a href="{{muUrl}}" class="dis">
                <div >
                    <img src="{{yinImage}}">
                </div>
            </a>
        </div>
        <ul id="playlist2">{{overview}}</ul>
    </div>
    <div class="help">
        <div class="expert">
            <div class="ex-tel">
                求助渠道
            </div>
        </div>
        <div class="mechanism">
            <p class="mec-text" ng-if="hotline">
                <span class="green">热线</span>
                <div ng-repeat=" hot in hotline" class="play-text"> <p >{{hot.name}}{{hot.phone}}</p></div>
            </p>
            <p class="mec-text" ng-if="institution">
                <span class="green">求助机构</span> 当您发觉您目前的情绪情况已经影响到您的日常生活或是工作，可以去可靠的心理机构进行专业的心理疏导。情绪发泄、咨询师
            </p>
            <ul class="mec-list" >
                <a href="mechanism1.html"><li class="mec-chui">联合心理咨询机构</li></a>
                <a href="mechanism1.html"><li class="mec-chui">大连静馨心理咨询室</li></a>
            </ul>
            <ul class="mec-list">
                <a href="mechanism1.html"><li class="mec-chui">大连大鹏心理机构</li></a>
                <a href="mechanism1.html"><li class="mec-chui">蓝海阳光心理机构</li></a>
            </ul>

        <div class="hospital">
            <p class="mec-text">
                <span class="green">B.求助医院</span>  如果显示结果较为严重，可以考虑到当地正规医院进行会诊，专业的医生会为您作出专业诊断，同时给予相应的心理支持。
            </p>
            <ul class="mec-list">
                <a href="mechanism1.html"><li class="mec-chui">大连医科大学医院</li></a>
                <a href="mechanism1.html"><li class="mec-chui">大连第三人民医院</li></a>
            </ul>
            <ul class="mec-list">
                <a href="mechanism1.html"><li class="mec-chui">大连市中心医院</li></a>
                <a href="mechanism1.html"><li class="mec-chui">大连医科大学医院</li></a>
            </ul>
        </div>
    </div>
    <div class="expert">
        <div class="ex-tel">
            免责声明
        </div>
        <p class="statement">
            基于人的心理特征的复杂性，以及该测评本身信效度的局限性，本网站所提供的建议也并不一定适合所有人群，所以本报告中并不具有普遍适应性。请您选择适合自己的建议，如有问题，请咨询专业的心理人员。
        </p>
    </div>
    <div class="out" id="hea">
        <a href="">回到首页</a>
    </div>

</div>
</body>

<script type="text/javascript" src="js/common.js"></script>
<script>
    $scope.userid = getQueryParam("userid"),
    $scope.epid = getQueryParam("epid");
    var app = angular.module('myApp', ['ngSanitize']);
    app.controller('myCtrl', function($scope,$http) {
      //http://ppa.051596111.com/api/report/personal/display?userid=1678&epid=12040508
        $scope.ApiRoot= "http://ppa.051596111.com/api/";
        $scope.init=function(){
            $scope.browserRedirect();//调用判断当前访问页面是手机端还是移动端
        };
        $scope.userid = "1678";
        $scope.epid ="12040508";
        $scope.loadStatistic=function(){
         debugger
            $http.post( $scope.ApiRoot+"report/personal/display?userid="+$scope.userid+"&epid="+ $scope.epid).success(function(response){
                $scope.epname=response.data.epname;
                $scope.introduction=response.data.introduction;
                $scope.condition=response.data.conclusion.condition;
                $scope.result=response.data.conclusion.result;
                $scope.standard=response.data.standard;
                $scope.guidance=response.data.ext.psychologist.guidance;
                $scope.url=response.data.ext.psychologist.guidance.video.url;
                $scope.title=response.data.ext.psychologist.guidance.video.title;
                $scope.overview=response.data.music_relax.overview;
                $scope.hotline=response.data.help_channel;
                $scope.institution=response.data.institution;
                $scope.hospital=response.data.hospital;
                $scope.selfhealing =response.data.selfhealing;
                $scope.yinUrl=response.data.music_relax.url;
                $scope.yinImage=response.data.music_relax.image;
                $scope.overview=response.data.music_relax.overview;
            });

        };

        //js引入判断
        $scope.browserRedirect=function() {
            var sUserAgent = navigator.userAgent.toLowerCase();
            var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
            var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
            var bIsMidp = sUserAgent.match(/midp/i) == "midp";
            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
            var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
            var bIsAndroid = sUserAgent.match(/android/i) == "android";
            var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
            var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
            if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
                //电脑端
                //加载css
                var linkNode = document.createElement("link");
                linkNode.setAttribute("rel", "stylesheet");
                linkNode.setAttribute("href", "./report/css/index.css");
                document.head.appendChild(linkNode);
                var linkNode1 = document.createElement("link");
                linkNode1.setAttribute("rel", "stylesheet");
                linkNode1.setAttribute("href", "./report/css/music.css");
                document.head.appendChild(linkNode1);
                //加载js
                var scriptNode = document.createElement("script");
                scriptNode.setAttribute("type", "text/javascript");
                scriptNode.setAttribute("src", "./report/js/music.js");
                document.head.appendChild(scriptNode);

                var scriptNode1 = document.createElement("script");
                scriptNode1.setAttribute("type", "text/javascript");
                scriptNode1.setAttribute("src", "./report/js/evaluation.js");
                document.head.appendChild(scriptNode1);
            } else {
                //手机端
                //加载css
                var oMeta = document.createElement('meta');
                oMeta.name = 'viewport';
                oMeta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no';
                document.getElementsByTagName('head')[0].appendChild(oMeta);
                var linkNode = document.createElement("link");
                linkNode.setAttribute("rel", "stylesheet");
                linkNode.setAttribute("href", "./report/cssApp/phone.css");
                document.head.appendChild(linkNode);
                var linkNode1 = document.createElement("link");
                linkNode1.setAttribute("rel", "stylesheet");
                linkNode1.setAttribute("href", "./report/cssApp/music.css");
                document.head.appendChild(linkNode1);
                //加载js
                var scriptNode = document.createElement("script");
                scriptNode.setAttribute("type", "text/javascript");
                scriptNode.setAttribute("src", "./report/appJs/jquery1.7.js");
                scriptNode.setAttribute("src", "./report/appJs/jquery1.8.js");
                scriptNode.setAttribute("src", "./report/appJs/flexible.js");
                scriptNode.setAttribute("src", "./report/appJs/musicApp.js");
                document.head.appendChild(scriptNode);
            }
        };

        document.getElementById("btn").onclick=function(){
            window.scrollTo(0,0);
        };
        document.getElementById("hea").onclick=function(){
            window.scrollTo(0,0);
        }

    });
</script>
</html>

这里面主要的方法是：
在这里插入图片描述
通过js判断，识别屏幕的分频率来展示页面。

xiaolei1888
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue pc移动两个html,vue一套代码适应移动端，pc端
weixin_28676973的博客
06-10 1908
一、使用场景：有适配pc端改为适配pc端和移动端，使用2套css代码实现App.vuecreated: function () {if(document.documentElement.clientWidth > 640){require('./style/index.：');this.plaform = 'pc';}else{require('./style/mobile.scss');t...
2行代码，让你的UI适配移动端、PC端，快来收藏
Web_boom的博客
05-09 2584
1. 讲个故事 移动端适配，每一个前端都绕不开的话题。新手可能会花比较多的时间在上面，也不一定能搞懂。 部分产品经理可能也绕不开移动端适配。比如你做一个内部审批平台，某位老板准备用手机审批时，打开发现样式错乱了，大概率追问下属：“这啥玩意儿，手机上根本看不了啊，我还得去办公室用电脑审批么？” 然后leader们开始逐级向下转发老板消息，到你时，你肯定慌了，老板说要适配移动端，大大小小的leader们都看见了，一定要好好适配啊！不然怕是工作没了。 于是，迫于压力，你开始大显身手。为了适配移动端，重新画原型，通
PC端页面和移动端页面，两份代码来回切换
m0_46978096的博客
11-16 2266
当你分开用两份代码写PC端和移动端时，需要根据情况来判断显示那一份，可以入下解决 将两份代码放入一个文件夹内，通过一个入口html文件来进行判断显示 main.html //判断是手机还是电脑 if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symb
vue中实现一个项目里兼容移动端和电脑端
hhb442的博客
03-12 3020
这种方案不是响应式方案，而是同一个项目（同一个ip和端口）移动端和pc端展示不同的页面，考虑到移动端的功能可能只是pc端的简化，所以是重新写移动端的界面（可能只是样式的调整，也可能是功能的简化）从上面的路由可以看出如果访问 ip:port 默认进的是pc端路由，那么如何让移动端访问 ip:port 进入 /mobile下的路由呢，首先只需要移动端路由和pc端路由不同，如下，移动端和pc端路由不同。的mounted()钩子函数中做如下判断，进行路由跳转。
前端移动端布局自适应 及移动端和PC端共用一套代码注意事项
weixin_43335008的博客
04-14 6524
移动端布局需要适应不同大小手机平板屏幕，所以字体图片等尺寸就要做到随着屏幕大小的变化去自适应，这样会给用户很好的体验感和美感。例如：以上就是今天要讲的内容，本文仅仅简单介绍了移动端布局注意事项。
婚庆整合服务网站模板-适配移动端&PC端-HTML网站源码.zip
03-31
这套源代码文件具有极高的可定制性，您可以根据您的项目需求，对页面布局、颜色和内容进行个性化调整，轻松打造出独具特色的网站。同时，我们的代码结构清晰、注释详细，便于您学习和掌握HTML、CSS和JavaScript等...
基于SpringMVC和Vue校园订餐系统（移动端+PC端+server端源码+SQL脚本+环境安装部署运行讲解）
06-17
在本系统中，Vue.js主要用于移动端和PC端的用户界面构建，通过组件化开发方式，使得页面逻辑更清晰，同时提供响应式数据绑定和指令系统，简化了前端开发流程。 系统中的"sql.sql"文件包含数据库的初始化脚本，这...
支持pc端和移动端的叠加相册js
07-01
本项目针对这一需求，提供了一款名为"layerpic"的Jquery相册插件，版本为2.1，它能够兼容PC端和移动端，实现触控式的叠加样式效果，使得用户无论是在台式机还是移动设备上都能享受到流畅的浏览体验。 首先，我们要...
jQuery移动端响应式滑动导航菜单特效代码
03-20
在本实例中，使用的是jQuery 1.10.2.min.js版本，这是一个经过优化的压缩版，旨在提高页面加载速度和性能。 响应式设计是现代网页开发的关键要素，它允许网站根据用户的设备屏幕尺寸进行自动调整。在移动设备上，一...
JS实现的PC 、移动端的弹层弹窗
最新发布
06-27
不仅整合了 PC 端和移动端的弹层效果，甚至还支持弹幕功能。这个解决方案使用原生的 JavaScript 编写，具有体积小、无需依赖任何 JavaScript 库以及不加载任何图片的优点，极大地提升了使用的便利性。 首先，身为...
vue单页面实现pc移动端页面不同
05-19
vue单页面实现pc移动端页面不同 博文：https://blog.csdn.net/qq_40488121/article/details/106218473
vue开发项目（PC端和移动端共用一套代码）（一）
qq_39480297的博客
07-14 2684
vue项目，编写一套代码，实现pc端与移动端兼容。具体实现，编写两套代码，通过路由加载不同端的文件......
vue开发项目（PC端和移动端共用一套代码）（二）
qq_39480297的博客
07-15 7293
vue开发PC端和移动端共用一套代码，通过屏幕宽度大小来判断显示pc端样式还是移动端样式。
pc端页面和移动端页面两套独立代码整合在一起的方法
weixin_46353030的博客
12-18 6511
一、使用工具和开发前提 vscode win10 pc适配和移动端是两套代码且适配均使用了rem布局 vue开发 二、步骤 开启新项目，配置好rem布局需要的条件。 在项目中的src->component目录中新建pccomponent 和 mobilecomponent目录，并将两套代码的component、assets（图片）文件分别放入相应的目录下，两个页面的字体可以公用，所以字体的配置可以直接在项目根目录下进行配置，然后在入口文件main.js文件中引入就可以了。 找到项目根
快速将pc和移动端网站合并成响应式网站
沫沫酱
06-12 3255
一、使用媒体查询加载不同css文件&lt;link rel="stylesheet" type="text/css" href="m/css/style.css" media="screen and (max-width:800px)"&gt;&lt;!--小于800px时加载移动端样式--&gt;&lt;link rel="stylesheet" type=&quot
使PC端网页宽度自适应手机屏幕大小
热门推荐
lzqial1987的专栏
11-26 3万+
有时候我们会纠结PC页面在手机页面上无法正常显示，超出屏幕，有些内容看不到，现在又了下面的代码，可以做到自适应手机屏幕宽度： 在网页的中增加一个meta标签： 可以让网页的宽度自动适应手机屏幕的宽度。 其中： width=device-width ：表示宽度是设备屏幕的宽度 initial-scale=1.0：表示初始的缩放比例 minimum-scale=
PC端、移动端的页面适配及兼容处理
u012545017的专栏
04-30 1290
来自博客园一网友的分享： 答案参考 https://www.cnblogs.com/shenxiaolin/p/5388464.html（来自http://www.uisdc.com/mobile-compatibility-analysis和http://www.ituring.com.cn/article/130015的整合） 第一种是通过响应式或页面终端判断去实现一套资源适配所有终端； ...
写前端代码，pc端和移动端有哪些区别
09-20
移动设备的处理能力、网络状况等都相对于PC端有限，因此在移动端开发时，需要更加注重优化代码，减少不必要的请求和资源加载，以提高页面的加载速度和性能表现。 综上所述，PC端和移动端在布局、用户交互、设备适配...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值