微信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. 数据结构【查找】—B树

    /*********************讲解后期补充*****************/ 先上代码 #include "000库函数.h" #define MAXSIZE 10 ...

  2. 使用google的pprof工具以及在gin中集成pprof

    首先我们得先安装这两个工具: google的pprof工具链 go get -u github.com/google/pprof gin的pprof工具 go get github.com/DeanT ...

  3. SpringMVC-DispatcherServlet工作流程及web.xml配置

    工作流程: Web中,无非是请求和响应: 在SpringMVC中,请求的第一站是DispatcherServlet,充当前端控制器角色: DispatcherServlet会查询一个或多个处理器映射( ...

  4. Android studio中布局文件出现render problem问题

    当做layout时,可能会出现render problem的情况.意思就是无法预览当前布局页面,这种情况是因为API版本太高造成的.只需要修改API为更低版本即可.

  5. UVA1627-Team them up!（动态规划）

    Problem UVA1627-Team them up! Total Submissions:3577  Solved:648 Time Limit: 3000 mSec Problem Descr ...

  6. Python：Day18 os模块、logging模块、正则表达式

    迭代器 满足迭代器协议: 1.内部有next方法 2.内部有iter()方法 os模块 import os print(os.getcwd()) #C:\Users\Lowry\PycharmProj ...

  7. Python代码分行问题

    可以用“\”符号把一行过长的Python代码分解成几行,多个语句也可以写在同一行,语句之间要用“;”隔开.

  8. linux安装mysql5.7.19

    0.查看操作系统内核版本 cat /proc/version [admin@octopus-att-d-030098 ~]$ cat /proc/versionLinux version 3.10.0 ...

  9. CentOS7时间设置问题

    本地安装一个VMWare player虚拟机客户端,并安装了Linux CentOS7 Basic Web Server系统,时区在安装时已经选择了Asia/Shanghai,但是安装完成后,时间和当 ...

  10. 编程&学习总结格式

    编程&学习总结格式 一.本周完成的作业: 题目1.A乘以B 题目内容描述:看我没骗你吧 -- 这是一道你可以在10秒内完成的题:给定两个绝对值不超过100的整数A和B,输出A乘以B的值. 1) ...