微信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. Sublime 汉化、快捷键打开浏览器

    Sublime 是一个优秀的代码编译工具,它具有漂亮的用户界面和强大的功能,例如代码缩略图,Python 的插件,代码段等.不仅如此,它还可自定义按键绑定,菜单和工具栏.由于是歪果仁开发的,所以官方版 ...

  2. 在Linux上编译Hadoop-2.4.0实践与总结

    问题导读: 1.编译源码前需要安装哪些软件? 2.安装之后该如何设置环境变量? 3.为什么不要使用JDK1.8? 4.mvn package -Pdist -DskipTests -Dtar的作用是什 ...

  3. C# Lambda 表达式学习之（四）：动态构建类似于 c => c.Age == 2 || c.Age == 5 || c => c.Age == 17 等等一个或多个 OrElse 的表达式

    可能你还感兴趣: 1. C# Lambda 表达式学习之(一):得到一个类的字段(Field)或属性(Property)名,强类型得到 2. C# Lambda 表达式学习之(二):LambdaExp ...

  4. 14.swing

    一.开发架构1.最外层是一个jframe的框架2.可以在框架中添加任意组件3.组件分为两大类: a.容器类型:可以继续在该容器中添加其他组件.例如:jpanel 面板,可以多个面板添加到同一个框架中 ...

  5. day25 Python

    一.day24复习 class school: x=1 #__init__初始化函数,用来帮类实例化一个具体的对象 def __init__(self,name,addr): #前面的Name是一个需 ...

  6. Eclipse下关于The serializable class UsersServlet does not declare a static final serialVersionUID field of type的警告

    The serializable class XXX does not declare a static final serialVersionUID field of type long seria ...

  7. 江苏省选2019Round1游记

    JSOI2019R1过去了. Day0 打板子.看白书. 晚上太热了,楼下还在打铁,睡不着. 折腾到好晚才勉强睡着. Day1 早上好困啊. 开T1.看起来T1的60分很可做的样子?5min打完了(为 ...

  8. js超时处理

    var now = new Date(); var exitTime = now.getTime() + numberMillis; //numberMillis毫秒超时参数 while (true) ...

  9. Generative Adversarial Nets[iGAN]

    本文来自<Generative Visual Manipulation on the Natural Image Manifold>,是大神Jun-Yan Zhu在2016年9月的作品. ...

  10. .Net外包篇:我是怎么看待外包的(二)

    延续上篇文章.net外包篇:我是如何看待外包的. 从这家公司辞职以后,得益于我校园信息平台和高校信息管理的经验,我进入了一个互联网类型公司.以前的经历,环环相扣,步步提升. 互联网时代 第四家客户(未 ...