微信QQ打开网页时提示用浏览器打开

一,需求分析

1.1,使用微信或QQ打开网址时，无法在微信或QQ内打开常用下载软件，手机APP等。故此需要在微信qq里提示

二,功能实现

2.1 html实现

  <div id='weixin-tip-box'>

         <div class="triangle_border_up">

             <span></span>

         </div>

         <div class="weixin-tip">

             <p>

                 请点击右上角

             </p>

             <p class="content">

                 选择"浏览器中打开"

             </p>

         </div>

     </div>

2.2 css实现

 <style type="text/css">

         * {

             margin:;

             padding:;

         }

         #weixin-tip-box {

             display: none;

             position: fixed;

             right:;

             top: 4px;

             align-items: center;

         }

         .weixin-tip {

             background: #40b2a8;

             z-index:;

             padding: 8px;

             border-radius: 8px;

             margin-right: 8px

         }

         .weixin-tip p {

             text-align: center;

             font-size: 14px;

             color: #fff

         }

         .weixin-tip p.content {

             text-align: center;

             font-size: 14px

         }

         .triangle_border_up {

             width:;

             height:;

             border-width: 0 6px 12px;

             border-style: solid;

             border-color: transparent transparent #40b2a8;

             /*透明 透明  灰*/

             margin-left: 114px

         }

     </style>

2.3 javascript实现

     <script type="text/javascript">

         var is_weixin = (function () {

             var ua = navigator.userAgent.toLowerCase();

             if (ua.match(/MicroMessenger/i) == "micromessenger") {//微信中打开网页

                 return true;

             } else if (ua.match(/QQ/i) == "qq") {//qq里打开网页

                 return true;

             } else {

                 return false;

             }

         })();

         window.onload = function () {

             //var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight;

             var tip = document.getElementById('weixin-tip-box');

             if (is_weixin) {

                 tip.style.display = 'block';

                 return false;

             }

         }

     </script>

2.4 实现效果

 <!DOCTYPE html>

 <html lang="zh_CN">

 <head>

     <meta charset="UTF-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <meta name="description" content="">

     <meta name="keywords" content="">

     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

     <meta name="renderer" content="webkit">

     <style type="text/css">

         * {

             margin: 0;

             padding: 0;

         }

         #weixin-tip-box {

             display: none;

             position: fixed;

             right: 0;

             top: 4px;

             align-items: center;

         }

         .weixin-tip {

             background: #40b2a8;

             z-index: 100;

             padding: 8px;

             border-radius: 8px;

             margin-right: 8px

         }

         .weixin-tip p {

             text-align: center;

             font-size: 14px;

             color: #fff

         }

         .weixin-tip p.content {

             text-align: center;

             font-size: 14px

         }

         .triangle_border_up {

             width: 0;

             height: 0;

             border-width: 0 6px 12px;

             border-style: solid;

             border-color: transparent transparent #40b2a8;

             /*透明 透明  灰*/

             margin-left: 114px

         }

     </style>

     <title>app下载</title>

 </head>

 <body class="success">

     <div id='weixin-tip-box'>

         <div class="triangle_border_up">

             <span></span>

         </div>

         <div class="weixin-tip">

             <p>

                 请点击右上角

             </p>

             <p class="content">

                 选择"浏览器中打开"

             </p>

         </div>

     </div>

     <script type="text/javascript">

         var is_weixin = (function () {

             var ua = navigator.userAgent.toLowerCase();

             if (ua.match(/MicroMessenger/i) == "micromessenger") {//微信中打开网页

                 return true;

             } else if (ua.match(/QQ/i) == "qq") {//qq里打开网页

                 return true;

             } else {

                 return true;

             }

         })();

         window.onload = function () {

             //var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight;

             var tip = document.getElementById('weixin-tip-box');

             if (is_weixin) {

                 tip.style.display = 'block';

                 return false;

             }

         }

     </script>

 </body>

 </html>

js判断移动端使用的系统平台

 var u = navigator.userAgent;

     if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {

         //安卓手机

     } else if (u.indexOf('iPhone') > -1) {

         //苹果手机

     } else if (u.indexOf('Windows Phone') > -1) {

         //winphone手机

     }

js判断访问网站的设备是否是PC

 //平台、设备和操作系统

 var system ={

 win : false,

 mac : false,

 xll : false

 };

 //检测平台

 var p = navigator.platform;

 system.win = p.indexOf("Win") == 0;

 system.mac = p.indexOf("Mac") == 0;

 system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);

 //跳转语句

 if(system.win||system.mac||system.xll){

 alert("PC访问");

 }else{

 alert("非PC访问");

 }

微信QQ打开网页时提示用浏览器打开的更多相关文章

  1. 解决当打开Unity时 提示项目已经打开，而自己之前并没有打开过（可能之前异常关闭）的问题

    当打开Unity时 提示项目已经打开,而自己之前并没有打开过(可能之前异常关闭) 发生这种情况时 打开项目目录中的 Temp文件夹,可以找到 一个 UnityLockfile 文件 将这个文件删除就可 ...

  2. 打开Excel时提示"您尝试打开的文件**.xls的格式与文件扩展名指定的格式不一致"

    问题描述:     系统安装了WPS时,Analyzer导出excel时候,会提示"您尝试打开的文件**.xls的格式与文件扩展名指定的格式不一致",这是Excel的安全问题,   ...

  3. 【原创】打开Excel时提示"您尝试打开的文件**.xls的格式与文件扩展名指定的格式不一致"

    问题描述:     系统安装了WPS时,Analyzer导出excel时候,会提示"您尝试打开的文件**.xls的格式与文件扩展名指定的格式不一致",这是Excel的安全问题,   ...

  4. 屏蔽打开文件时提示“您尝试打开的文件xxx.xls的格式与文件扩展名指定的格式不一致。打开文件前请验证文件没有损坏且来源可信。是否立即打开该文 件？”

    修改注册表解决 1.打开注册表编辑器 方法:开始 -> 运行 -> 输入regedit -> 确定 2.找到注册表子项 HKEY_CURRENT_USER\Software\Micr ...

  5. 访问网页时提示的503错误信息在IIS中怎么设置

    访问网页时提示的503错误信息在IIS中怎么设置 503是一种常见的HTTP状态码,出现此提示信息的原因是由于临时的服务器维护或者过载,服务器当前无法处理请求则导致了访问网页时出现了503错误.那么当 ...

  6. Loadrunner12.5-录制http://www.gw.com.cn/网页时提示“SSL身份验证失败”错误，这是为什么呢？

    问题:LR产品,录制http://www.gw.com.cn/ 网页时提示下图错误,这是为什么呢? 请在如下recording options中选择正确的SSL版本,再进行录制. 注:如何确定那个SS ...

  7. 在Chrome中打开网页时出现以下问题 您的连接不是私密连接 攻击者可能会试图从 x.x.x.x 窃取您的信息（例如：密码、通讯内容或信用卡信息）

    现象:在Chrome中打开网页时出现以下问题 您的连接不是私密连接 攻击者可能会试图从 x.x.x.x 窃取您的信息(例如:密码.通讯内容或信用卡信息). 当点开"了解详情"后显示 ...

  8. Win2003打开网页时总是提示添加网址到信任站点的设置方法

    在WIN2003系统中,我们打开网页,或打开网站,或浏览网页时,老是跳出一个窗口提示“添加网址到信任站点”,“网页老是提示添加信任”或“2003每打开一次网页都要加入受信任站点”或“win2003提示 ...

  9. 解决浏览器打开网页后提示“dns_probe_possible”的方法

    使用浏览器浏览网页时偶尔会遇到无法上网且浏览器提示:DNS_PROBE_POSSIBLE 一般有三种情况会导致这样的故障: 1.网络协议出现故障,也就是常说的 DNS 设置问题 2.浏览器中设置问题, ...

随机推荐

  1. 在模态框（Modal）中使用UEditor全屏显示的一个坑

    根据这个问题很简单就能查到一些文章明确说明了解决问题的方法,就是如下一段代码: var isModal = false; //判断该dom是否为modal var classes = $(contai ...

  2. python3编写网络爬虫22-爬取知乎用户信息

    思路 选定起始人 选一个关注数或者粉丝数多的大V作为爬虫起始点 获取粉丝和关注列表 通过知乎接口获得该大V的粉丝列表和关注列表 获取列表用户信息 获取列表每个用户的详细信息 获取每个用户的粉丝和关注 ...

  3. JavaScript函数式编程

        一段糟糕透顶的海鸥seagulls程序   鸟群合并conjoin则变成了一个更大的鸟群,繁殖breed则增加了鸟群的数量,增加的数量就是它们繁殖出来的海鸥的数量 //Flock 群 var ...

  4. 【Linux基础】VI命令模式下删除拷贝与粘贴

    在VI命令模式下:y 表示拷贝, d 表示删除,p标识粘贴 1.删除 dw 表示删除从当前光标到光标所在单词结尾的内容. d0 表示删除从当前光标到光标所在行首的内容. d$ 表示删除从当前光标到光标 ...

  5. Automatically migrating data to new machines kafka集群扩充迁移topic

    The partition reassignment tool can be used to move some topics off of the current set of brokers to ...

  6. Nginx使用教程(七)：使用Nginx缓存之proxy cache

    定义缓存目录 <br\>使用您喜欢的文本编辑器打开/etc/nginx/nginx.conf,并在http {区域加入: proxy_cache_path  /var/www/cache ...

  7. 前端使用node.js+express+mockjs+mysql实现简单服务端，2种方式模拟数据返回

    今天,我教大家来搭建一个简单服务端 参考文章: https://www.jianshu.com/p/cb89d9ac635e https://www.cnblogs.com/jj-notes/p/66 ...

  8. Gulp的简单使用

    我比较喜欢使用Gulp,因为简单好用! 今天的任务是:使用Gulp来压缩 jQuery源码,各输出一个压缩的和未压缩的版本 第一步:安装 cnpm install gulp --save-dev cn ...

  9. js模块化规范—概念和模块化进化史以及模块化的问题

    模块的概念 一个复杂的项目开发中,会写很多js文件,一个js文件执行某些特定的功能,那么每个js都可以称为一个模块,这就是模块的概念 每个js模块内部数据/实现是私有的, 只是向外部暴露一些接口(方法 ...

  10. linux学习笔记整理（七）

    第八章 Centos7软件包的管理与安装本节所讲内容:8.1 使用rpm命令-安装-查看-卸载-rpm软件包8.2 yum管理软件包8.3 实战tar源码包管理-srpm源码包安装方法 8.1 软件包 ...