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. 记一次 .NET 某电子厂OA系统 非托管内存泄露分析

    一:背景 1.讲故事 这周有个朋友找到我,说他的程序出现了内存缓慢增长,没有回头的趋势,让我帮忙看下到底怎么回事,据朋友说这个问题已经困扰他快一周了,还是没能找到最终的问题,看样子这个问题比较刁钻,不 ...

  2. Java-递归查询法

    递归查询用户所在团队的老大的用户id(一个团队中,只有一个老大,也就是父级id="-1") 如下:是表结构 first_agent_id----用户的上级id user_id--- ...

  3. day03-功能实现02

    家居网购项目实现02 5.功能04-会员登录 5.1需求分析/图解 需求如图: 输入用户名.密码后提交 判断该用户是否存在 如果存在,显示登录成功页面 否则返回登录页面,要求重新登录 要求改进登录密码 ...

  4. 重学c#系列—— 反射的基本理解[三十三]

    前言 在上一章中介绍了什么是反射: https://www.cnblogs.com/aoximin/p/16440966.html 正文 上一节讲述反射的基本原理和为什么要用反射,还用反射的优缺点这些 ...

  5. JavaScript：操作符：比较运算符及其隐式转换数据类型

    不等关系 即大于>:大于等于>=:小于<:小于等于<= 当比较的两个变量,有非数字时,会隐式转换为数字再比较,转换情况同算术运算符: 当两个变量均为字符串时,不会进行转换,而是 ...

  6. day09-功能实现08

    家居网购项目实现08 以下皆为部分代码,详见 https://github.com/liyuelian/furniture_mall.git 19.功能18-添加家居到购物车 19.1需求分析/图解 ...

  7. 【Redis实战专题】「性能监控系列」全方位探索Redis的性能监控以及优化指南

    Redis基本简介 Redis是一个开源(BSD 许可).内存存储的数据结构服务器,可用作数据库,高速缓存和消息队列代理.它支持字符串.哈希表.列表.集合.有序集合等数据类型.内置复制.Lua 脚本. ...

  8. 全志V3S 调试串口更改或关闭

    有时项目外设比较多,很容易造成串口不够用的情况. 最近就遇到了,新增加一个GPS模块串口的,串口现在外部只有原来的调试串口可以用,所以 尝试将调试口更改为普通串口. 经过网上看大神们的文章和自己摸索, ...

  9. 疯狂吐槽 MAUI 以及 MAUI 入坑知识点

    目录 窗口 窗口管理 如何限制一次只能打开一个程序 MAUI 程序安装模式 为 MAUI Blazor 设置语言 坑 ① 坑 ② 坑 ③ 配置 MAUI 项目使用管理员权限启动 问题背景 定制编译过程 ...

  10. 结构型模式 - 外观模式Facade

    1.tm的NT审核机制,满篇文章哪来的广告? 就算有也是你们自己加的吧?等财富能支持我自己的网站后,就是和你们说再见之时. 2.tm第二遍说,我接着提交,这个审核机制的傻逼设计者或者是程序敲出来的bu ...