直接在网上扒一个页面，分分钟搞定!  先看一下效果

这是用微信开发工具打开的样式，直接上完整代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1"/>
  6.     <title>忆游APP下载</title>
  7. </head>
  8. <body>
  9.     <style type="text/css">
  10.     *{margin:0; padding:0;}
  11.     img{max-width: 100%; height: auto;}
  12.     .test{height: 600px; max-width: 600px; font-size: 40px;}
  13.     </style>
  14.  
  15.     <script type="text/javascript">
  16.         var img = 'android.png';
  17.         function is_weixin() {
  18.             var ua = navigator.userAgent.toLowerCase();
  19.             if(ua.indexOf('iphone') > -1){
  20.                     img = 'iphone.png';
  21.             }else{
  22.                     img = 'android.png';
  23.             }
  24.             if (ua.match(/MicroMessenger/i) == "micromessenger") {
  25.                 return true;
  26.             } else {
  27.                 return false;
  28.             }
  29.         }
  30.         var isWeixin = is_weixin();
  31.         var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight;
  32.  
  33.         function loadHtml(){
  34.             var div = document.createElement('div');
  35.             div.id = 'weixin-tip';
  36.             div.innerHTML = '<p><img src="'+ img +'" alt="微信打开"/></p>';
  37.             document.body.appendChild(div);
  38.         }
  39.  
  40.         function loadStyleText(cssText) {
  41.             var style = document.createElement('style');
  42.             style.rel = 'stylesheet';
  43.             style.type = 'text/css';
  44.             try {
  45.                 style.appendChild(document.createTextNode(cssText));
  46.             } catch (e) {
  47.                 style.styleSheet.cssText = cssText; //ie9以下
  48.             }
  49.             var head=document.getElementsByTagName("head")[0]; //head标签之间加上style样式
  50.             head.appendChild(style);
  51.         }
  52.         var cssText = "#weixin-tip{position: fixed; left:0; top:0; background: rgba(0,0,0,0.8); filter:alpha(opacity=80); width: 100%; height:100%; z-index: 100;} #weixin-tip p{text-align: center; margin-top: 10%; padding:0 5%;}";
  53.         if(isWeixin){
  54.             loadHtml();
  55.             loadStyleText(cssText);
  56.         }else{
  57.                 window.location.href="http://static.youliaoar.com/operation/yiyou/aryiyou1.1.0.apk";
  58.         }
  59.     </script>
  60. </body>
  61. </html>

微信在浏览器打开前的提示页面Android与IOS判断的更多相关文章

  1. 微信网页浏览器打开链接后跳转到其他浏览器下载APK文件包

    做微信营销活动或者APK下载推广时候,是无法直接下载,做到微信中正常使用呢?这就要借助一些工具来实现有效的操作. 安卓手机的话是通过点击链接,直接跳转出微信.自动打开手机默认的浏览器.但是这个方法IO ...

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

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

  3. HTML页面只能使用微信浏览器打开

    看到一个项目,刚开始还以为是APP,只能用微信打开.仔细看了下原来是个web项目,只是禁用了其他浏览器打开,只能用微信浏览器打开.加上前端页面用了类似mui的模板,就更像APP了. 百度了下,参考 h ...

  4. 【第二十篇】C#微信H5支付 非微信内浏览器H5支付 浏览器微信支付

    微信开发者文档 微信H5支付官方文档   请阅读清楚  最起码把所有参数看一遍 这个地方也可以看看 微信案例 http://wxpay.wxutil.com/mch/pay/h5.v2.php,请在微 ...

  5. 微信小程序web-view(webview) 嵌套H5页面 唤起微信支付的实现方案

    场景:小程序页面有一个web-view组件,组件嵌套的H5页面,要唤起微信支付. 先讲一下我的项目,首先我是自己开发的一个H5触屏版的商城系统,里面含有购物车,订单支付等功能.然后刚开始,我们公众号里 ...

  6. uni-app-在开启小程序在微信开发工具打开时，打开失败，解决方法：手动打开

    这是我自学ui-app的第一张记录内容,问题都是我在实际开发中遇到的问题 1.微信开发工具打开失败,提示是: 接着我的流程就是打开上面提到的链接,进入页面:https://developers.wei ...

  7. JS判断在哪一端浏览器打开

    <script src="js/jquery-2.2.3.min.js"></script> <script> var browser = { ...

  8. 微信中打开链接,自动打开外部浏览器打开指定URL页面

    上半年公司有一个新的APP项目上线,我们在项目首页做个二维码,然后用户用手机扫一扫就能下载了.但是很多用户反映扫一扫之后下载不了,了解之后才知道这些用户都是使用的微信的扫一扫,而我们开发测试人员一般使 ...

  9. 微信如何实现自动跳转到用其他浏览器打开指定页面下载APP

    不管是app的下载链接还是普通文件的链接在微信内置浏览器或者QQ内置浏览器都会被屏蔽.这是微信对第三方下载域名实施的拦截政策.被拦截了用户在微信内打开就会提示“已停止访问该网页”. 那么当我们遇到这个 ...

随机推荐

  1. Hive 基本语法操练（四）：Hive 复合类型

    hive语法中主要提供了以下复合数据类型: 1)Structs: structs内部的数据可以通过DOT(.)来存取.例如,表中一列c的类型为STRUCT{a INT; b INT},我们可以通过c. ...

  2. Storm概念学习系列之storm的特性

    不多说,直接上干货! storm的特性 Storm 是一个开源的分布式实时计算系统,可以简单.可靠地处理大量的数据流. Storm支持水平扩展,具有高容错性,保证每个消息都会得到处理,而且处理速度很快 ...

  3. asp.net web 开发中配置web.config

    一.配置数据库连接字符串 <connectionStrings> <add name="CaoLPractise" connectionString=" ...

  4. Python3.5 调用Ansible 执行命令

    ansible.py #!/usr/bin/env python3 # -*- coding: utf-8 -*- import os import tempfile from collections ...

  5. 《从0到1学习Flink》—— Flink Data transformation(转换)

    前言 在第一篇介绍 Flink 的文章 <<从0到1学习Flink>-- Apache Flink 介绍> 中就说过 Flink 程序的结构 Flink 应用程序结构就是如上图 ...

  6. 性能测试学习第五天_loadrunner概述

    1.为什么要进行性能测试(性能测试贯穿于软件生命周期) The failure of a mission-critical application can be costly. Assure perf ...

  7. ElasticSearch安装(以Docker的方式）

    拉取docker镜像: docker pull docker.elastic.co/elasticsearch/elasticsearch:6.1.1 命令行方式启动 测试环境     :docker ...

  8. 学习《CSS选择器Level-4》不完全版

    1 概述 1.1 前言 选择器是CSS的核心组件.本文依据W3C的Selectors Level 4规范,概括总结了Level1-Level4中绝大多数的选择器,并做了简单的语法说明及示例演示.希望对 ...

  9. HTML和CSS中一些有趣的

    CSS Rese http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css <link rel="styleshe ...

  10. java的图形界面初学惯用

    1.单一界面的创建 public void mainFrame() { HashMap<String, Component> views = new HashMap<String, ...