微信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. 英语初级学习系列-00-Hello-打招呼

    开场白 当二咪过生日的时候,作为主人公(host)该如何开场呢? 1. Good evening, ladies and gentlemen. 先生们女士们,晚上好. 2. Welcome to my ...

  2. ES5-ES6-ES7_数值的扩展

    二进制与八进制数值表示法: 二进制用0b, 八进制用0o console.log(0b1010) console.log(0o56) Number.isFinite(i) 判断是否是有限大的数 con ...

  3. 最短路 summary

    有四种类型: 单源:dij,spfa,bellman-ford 多源:floyd dij有两种: 一个复杂度为n^2,一个复杂度是m*logn 畅通工程续 某省自从实行了很多年的畅通工程计划后,终于修 ...

  4. Java锁的种类以及辨析（二）：自旋锁的其他种类

    作者:山鸡 锁作为并发共享数据,保证一致性的工具,在JAVA平台有多种实现(如 synchronized 和 ReentrantLock等等 ) .这些已经写好提供的锁为我们开发提供了便利,但是锁的具 ...

  5. Python：Day15 函数

    函数参数补充: 还可以这样传参: def f(*args): print(args) f(*[1,3,4,5]) #输出结果:(1, 3, 4, 5) 注意这是一个元组 def f2(**kwargs ...

  6. 定义静态map

    public final static Map<String, String> header = new HashMap<String, String>(); static { ...

  7. SQLAlchemy中的自引用

    SQLALCHEMY采用adjacency list pattern来表示类的自引用. 例如,对于类Node自引用: class Node(Base): __tablename__='node' id ...

  8. docker 11 docker的commit操作

    docker commit :表示提交一个容器的副本使之成为新的镜像.假如我们在docker上运行了一个tomcat的容器,对Tomcat容器进行了修改操作,然后我们将修改操作后的tomcat进行co ...

  9. XSS高级利用

    XSS会话劫持 (1)Cookie简介 Cookie是能够让网站服务器把少量文本数据存储到客户端的硬盘.内存,或者是从客户端的硬盘.内存读取数据的一种技术. Cookie是一段随HTTP请求.响应一起 ...

  10. unique

    作用: 元素去重,即“删除”序列中所有相邻的重复元素(只保留一个) (此处的删除,并不是真的删除,而是指重复元素的位置被不重复的元素占领了) (其实就是把多余的元素放到了最后面) 由于它“删除”的是相 ...