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. 【Shell脚本案例】案例5：找出CPU/内存率占用高的进程

    一.背景 找出占用高的进程 使用脚本编写找出占用CPU的进程 二.分析 1.查看进程 top 输入后按C,就可以列出 其他: ps aux 2.思路 awk进行排序,如top10 即ps aux |a ...

  2. layui table 表头抖动

    原本table超出页面宽度(即table有横向滚动条)的情况下,缩放页面然后再设置定时器定时更新表单,会发现数据不变的时候table头部会左右抖动 而且th td比设置的minWidth 或者cell ...

  3. STM32标准库中GPIO_ReadInputData与GPIO_ReadInputDataBit的区别

    GPIO_ReadInputData读的是GPIOx的整个IDR寄存器的数据,返回一个十六位数,对应IDR寄存器的十六位.反映GPIOx所有端口的电平状态,所以参数只用传入GPIOx. uint16_ ...

  4. RabbitMQ、RocketMQ、Kafka延迟队列实现

    延迟队列在实际项目中有非常多的应用场景,最常见的比如订单未支付,超时取消订单,在创建订单的时候发送一条延迟消息,达到延迟时间之后消费者收到消息,如果订单没有支付的话,那么就取消订单. 那么,今天我们需 ...

  5. Spring IOC官方文档学习笔记（二）之Bean概述

    1.Bean概述 (1) Spring IoC容器管理一个或多个bean,这些bean是根据我们所提供的配置元数据来创建的,在容器内部,BeanDefinition对象就代表了bean的配置元数据,它 ...

  6. python实验报告（第12章）

    实验12:GUI界面编程 一.实验目的和要求 1.学会应用常用控件: 2.学会使用BoxSizer布局: 3.学会事件处理. 二.实验环境 软件版本:Python 3.10 64_bit 三.实验过程 ...

  7. [论文总结] kmeans聚类和WGCNA

    kmeans聚类和WGCNA 文章目录 kmeans聚类和WGCNA 论文1 论文2 论文3 总结 总结了3篇论文中kmeans聚类和WGCNA的运用. 论文1 Comprehensive disse ...

  8. CentOS7升级Linux内核

    CentOS7升级Linux内核 什么是Linux内核 虽然时候使用 Linux 来表示整个操作系统,严格地说,Linux 只是个内核,而发行版的操作系统是一个完整功能的系统,它建立在内核之上,具有各 ...

  9. 【Surface Detection】Segmentation-Based Deep-Learning Approach for Surface-Defect Detection

    物体表面缺陷检测现状 传统机器学习局限性 传统机器学习方法对于特定的算法只能解决特定的问题,不够灵活,无法快速适应新产品: 不同的问题有不同的特征,当需要解决新问题时,需要重新设计特征,开发周期长: ...

  10. dp 优化

    dp 优化 \(\text{By DaiRuiChen007}\) I. [ARC085D] - NRE \(\text{Link}\) 思路分析 将最终的第 \(i\) 对 \(a_i\) 和 \( ...