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. MySQL进阶实战6，缓存表、视图、计数器表

    一.缓存表和汇总表 有时提升性能最好的方法是在同一张表中保存衍生的冗余数据,有时候还需要创建一张完全独立的汇总表或缓存表. 缓存表用来存储那些获取很简单,但速度较慢的数据: 汇总表用来保存使用grou ...

  2. 【zookeeper】Zookeeper相关概念、重难点（myid）、语法、使用、工具

    1234567890 1请按照我是想额度插入fvtgb6yhn7ujm8ik,9ol.

  3. 《HTTP权威指南》– 5.Web服务器

    Web服务器概念: 实现了HTTP和相关的TCP连接处理,负责管理Web服务器提供的资源,以及对Web服务器的配置.控制及扩展方面的管理. 各种不同的形式: 通过软件Web服务器:运行在标准的.有网络 ...

  4. python基础之hashilb模块、logging模块

    hashlib加密模块 1.何为加密 将文明数据处理成密文数据 让人无法看懂 2.为什么要加密 保证数据的安全,防止密码泄露 3.如何判断数据是否加密 密文数据的表现形式一般都是一串没有规则的字符串( ...

  5. uniapp详细入门教程

    链接:https://www.ruletree.club/archives/2071/ 点击链接查看,内容详细,一学就会哦~! /******** * * .-~~~~~~~~~-._ _.-~~~~ ...

  6. 2022弱口令实验室招新赛CTF赛道WriteUp

    Misc 签到 下载附件,得到一张二维码. 扫码,然后根据提示"linux"操作系统,直接cat /flag,得到flag. EasyMisc 下载得到EasyMisc附件,压缩包 ...

  7. 微服务框架——SpringBoot

    SpringBoot 1.创建Boot项目的两种方式 1.1通过spring网站创建 进入Spring Initializr 选择填写对应配置,打包 将zip格式的压缩包解压,并导入该项目 1.2 通 ...

  8. angular Ionic CLI组件建立，使用图标，弹窗，按钮，卡片，列表，无尽滚动，刷新

  9. 腾讯出品小程序自动化测试框架【Minium】系列（六）常见组件的处理

    写在前面 我发现一件神奇的事,当你学一门新技术或者新的知识点遇到不会的时候,真的可以先放一放,第二天再去学习,也许说不定也就会了. 为什么这么说? 昨天文章断断续续的写了近一天,有一个组件不认识,自然 ...

  10. avalonia自定义弹窗

    对于使用avalonia的时候某些功能需要到一些提示,比如异常或者成功都需要对用户进行提示,所以需要单独实现弹窗功能,并且可以自定义内部组件,这一期将手动实现一个简单的小弹窗,并且很容易自定义 创建项 ...