HTML：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

    <title>设备区分判断</title>

    </head>

    <body>

    <!--用VUE，否则{{flag}}不好使，这是VUE的写法  -->

    <!-- flag=1是ipad,flag = 2 是移动，flag=0是PC -->

    <div id="app" v-cloak>

      {{flag}}---

      <div id="fit">

      <!-- 移动端 -->

      <div v-if="flag==2">

        <span class='font36'>这是移动</span>

      </div>

      <!-- ipad -->

      <div v-else-if="flag==1">

        <span class='font36'>ipad</span>

      </div>

      <!-- pc端 -->

      <div v-else>

        <span class='font36'>这是pc端</span>

      </div>

    </div>

    <script src="js/vue.js"></script>

    <!--当前页面js-->

    <script src="js/index.js"></script>

</body>

</html>

index.js

// 区分ipad,H5,PC

var userAgentInfo = navigator.userAgent;

var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");

var flag = 0;

var v=0

for ( v = 0; v < Agents.length; v++)

{

    if (userAgentInfo.indexOf(Agents[v]) > 0) {

        if(Agents[v]=="iPad"){   //ipad如定义移动端去掉就行了,这里ipad按PC端计算

            flag = 1;

        }else{

            // 移动端

            flag = 2;

        }

        break;

    }

}

// 区分H5,PC

/*

if (/Android|webOS|iPhone|iPod|iPad|BlackBerry|SymbianOS/i.test(navigator.userAgent)) {

    // 移动端

    window.flag = 2

} else {

    // PC端

    window.flag = 1

}

*/

// flag页面中用的VUE写法，需要加VUE声明

var app = new Vue({

    el: "#app",

    data: { },

    methods:{ },

    mounted:function(){ }

})

设备区分判断IPAD,H5,PC的更多相关文章

  1. ios5和ios6横竖屏支持及ipad和iphone设备的判断

    ios5和ios6横竖屏支持及ipad和iphone设备的判断 判断是ipad还是iphone设备.此定义在PayViewControllerDemo-Prefix.pch 定义如下: #define ...

  2. 判断浏览器是pc端还是手机端

    1. 判断浏览器是pc端还是手机端 <script type="text/javascript"> var browser = { versions: function ...

  3. JQuery 判断IPad、IPhone、Android是横屏还是竖屏（Window.Orientation实现)

    在ipad.iphone网页开发中,我们很可能需要判断是横屏或者竖屏.下面就来介绍如何用 jQuery 判断iPad.iPhone.Android是横屏还是竖屏的方法. 代码如下: function ...

  4. PHP判断客户端是PC web端还是移动手机端方法

    PHP判断客户端是PC web端还是移动手机端方法需要实现:判断手机版的内容加上!c550x260.jpg后缀变成缩略图PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能 ...

  5. js判断是否是pc

    //判断是否是pc function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = new Array("An ...

  6. java 判断用户是PC端和还是APP端登陆

    java 判断用户是PC端和还是APP端登陆 public void getRequestHeader(HttpServletRequest request){ // 从浏览器获取请求头信息 Stri ...

  7. 如何判断页面是pc端还是移动端，进入不同的页面

    vue判断是pc端还是移动端分别进入不同的页面 判断移动端代码如下: function IsPC(){ var userAgentInfo = navigator.userAgent; var Age ...

  8. 区分移动端和pc端

    区分移动端和pc端: window.navigator.userAgent.toLowerCase().indexOf('mobile')== -1   判断  等于-1就是pc,false就是移动端 ...

  9. 判断移动还是PC 以及微信环境

    //判断pc还是移动端 function IsPC() {   var userAgentInfo = navigator.userAgent;   var Agents = ["Andro ...

  10. 媒体查询判断ipad和iPhone各版本

    /* 判断ipad */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px){ /* s ...

随机推荐

  1. 18V降压3.3V，15V降压3.3V的降压IC和LDO芯片方案

    在 18V 和 15V 输入中,我们需要给其他电源电路提高供电,有的电路的供电电压在 5V,或者是 3.3V 时, 我们就需要使用降压芯片来组建一个降压电路来给后面的的电路,提供稳定的,持续的 3.3 ...

  2. 5V升压12.6V

    产品概述 PW4053 是一款 5V 输入,最大 1.2A 充电电流,支持三节锂离子电池的升压充电管理 IC.PW4053 集成功率 MOS,采用异步开关架构,使其在应用时仅需极少的外围器件,可有效减 ...

  3. 使用python脚本传递参数：（三种方式可收藏）

    背景:使用python脚本传递参数在实际工作过程中还是比较常用,以下提供了好几种的实现方式: 一.使用sys.argv的数组传入说明:使用sys.argv必须按照先后的顺序传入对应的参数:sys.ar ...

  4. 什么是JS？JS的用途？

    一.JavaScript是什么?它有什么作用? JavaScript是一种运行在客户端的脚本语言,简称JS,属于解释性语言.它是一行翻译执行完以后再进行下一行,代码不进行预编译. JavaScript ...

  5. linux挖矿处置

    挖矿的类型 主动挖矿:用户在个人电脑或服务器使用挖矿程序进行CPU,GPU计算,获取虚拟货币. 被动挖矿:挖矿病毒通过系统漏洞,恶意程序,弱口令等方式入侵服务器,设备感染挖矿病毒后会开始挖掘虚拟货币. ...

  6. 2022NewStarCTF新生赛一些比较有意思的题目wp

    Misc_蚁剑流量分析 Pcap的文件可以直接使用工具 编辑器打开目录,一个一个看,可以找到eval危险函数 看到n3wst4r,直接使用linux正则匹配,找出相关内容 Url解码,了解一下蚁剑流量 ...

  7. day13-功能实现12

    家居网购项目实现012 以下皆为部分代码,详见 https://github.com/liyuelian/furniture_mall.git 29.功能27-Ajax检验注册名 29.1需求分析/图 ...

  8. Google分布式文件系统GFS论文学习

    GFS作为最著名的分布式文件系统,首先具备了大规模.可扩展.适配大文件.自动运维等高级特性.虽然是比较早期的分布式文件系统,但是它里面的设计思想还是值得现代分布式系统设计参考的,并且还有很多后期著名的 ...

  9. kafka详解(01) - 概述

    kafka详解(01) - 概述 定义:Kafka是一个分布式的基于发布/订阅模式的消息队列(Message Queue),主要应用于大数据实时处理领域. 消息队列 MQ传统应用场景之异步处理 使用消 ...

  10. 《Effective C++》设计与声明章节

    Item18:让接口容易被正确使用,不易被误用 总结: 1.好的接口很容易被正确使用,不容易被误用.你应该在你的所有接口中努力达到这些性质. 2."促进正确使用"的办法包括接口的一 ...