微信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. Vue+Webpack常见问题（持续更新）

    常识 1.computed计算属性,使用的属性必需在data里面声明. computed: { canLogin: function(){ //注意这里的依赖的属性必需在data里面声明 return ...

  2. Optimizing Hive queries for ORC formatted tables

    Short Description: Hive configuration settings to optimize your HiveQL when querying ORC formatted t ...

  3. ubuntu 安装 GCC 和 G++ C++ 开发环境

    1.先安装 :sudo apt-get install build-essential 2.查看 gcc 版本 然后安装 统一版本的 g++ gcc --version gcc (Ubuntu/Lin ...

  4. Angular 开发小妙招1：提交表单数据验证不通过，更改输入组件的样式

    开发表单时,客户端数据完整性校验是必不可少的,在jquery 时代出现了无数的数据验证插件也很好用,开发Angular 应用时,angular 内置了一些常用的数据验证指令.今天要讲的不是这些指令如何 ...

  5. EBS採购模块中的高速接收和高速接收事务

    EBS採购模块中的高速接收和高速接收事务 (版权声明.本人原创或者翻译的文章如需转载,如转载用于个人学习,请注明出处.否则请与本人联系,违者必究) 高速功能是一个高速输入收货和接收事务的方法. 在收货 ...

  6. 微信小程序接入，https服务器搭建和调试

    在进行小程序开发时候,调试时候,希望在本地搭建一个https环境. 准备条件: 1.公网主机(阿里云或者腾讯云主机) 2外网访问工具natapp 步骤: 1.在主机上安装nginx(nginx转发到n ...

  7. UVA1152-4 Values whose Sum is 0（分块）

    Problem UVA1152-4 Values whose Sum is 0 Accept: 794  Submit: 10087Time Limit: 9000 mSec Problem Desc ...

  8. BZOJ3577:玩手机(最大流,二维ST表)

    Description 现在有一堆手机放在坐标网格里面(坐标从1开始),坐标(i,j)的格子有s_(i,j)个手机. 玩手机当然需要有信号,不过这里的手机与基站与我们不太一样.基站分为两种:发送站和接 ...

  9. 路飞学城-Python开发集训-第5章

    面向过程:核心是过程二字,过程是解决问题的步骤,相当于设计一条流水线,是机械式的思维方式 优点:复杂的问题流程化,进而简单化 缺点:可扩展性差 面向对象:核心是对象二字,对象就是特征与技能的结合体. ...

  10. PHP 3 函数

    PHP 的真正力量来自它的函数:它拥有超过 1000 个内建的函数. PHP 用户定义函数 除了内建的 PHP 函数,我们可以创建我们自己的函数. 函数是可以在程序中重复使用的语句块. 页面加载时函数 ...