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. 说说真实Java项目的开发流程，以及面试前的项目准备说辞

    介绍项目是必不可少的Java面试环节,求职者需要借此证明自己真实Java项目的经验,如果再做的好的话,需要借此展开自己的亮点说辞. 不过之前如果只有学习项目经验,比如是自己跑通一个项目,或者是在培训班 ...

  2. MySQL的安装与配置，图形化软件安装，以及IDEA上的配置操作

    1. MySQL安装详细教程 注意:本次安装例为随笔发布时最新的8.0.31版本教程,由于您所希望安装的版本不同可能会导致一些问题,请谅解. 进入官网下载界面 https://www.mysql.co ...

  3. 基于.NetCore开发博客项目 StarBlog - (21) 开始开发RESTFul接口

    前言 最近电脑坏了,开源项目的进度也受到一些影响 这篇酝酿很久了,作为本系列第二部分(API接口开发)的第一篇,得想一个好的开头,想着想着就鸽了好久,索性不扯那么多了,直接开写吧~ 关于RESTFul ...

  4. Spring IOC官方文档学习笔记（三）之依赖项

    1.依赖注入 (1) 依赖注入(DI)的概念:某个bean的依赖项,由容器来负责注入维护,而非我们自己手动去维护,以此来达到bean之间解耦的目的,如下 //情况一:不使用依赖注入 public cl ...

  5. netkit-telnet源码编译安装

    介绍 Linux 下流行的 telnet 实现有两个: GNU inetutils: http://ftp.gnu.org/gnu/inetutils/ 哈佛netkit-telnet 源码包:htt ...

  6. 从一道CTF题学习python字节码到源码逆向

    概述: 该题来源为2022爱春秋冬季赛ezpython,难度不是很大刚好适合我这样的萌新入门 题目: 3 0 LOAD_CONST 1 (204) 3 LOAD_CONST 2 (141) 6 LOA ...

  7. Kubernetes的垂直和水平扩缩容的性能评估

    Kubernetes的垂直和水平扩缩容的性能评估 译自:Performance evaluation of the autoscaling strategies vertical and horizo ...

  8. 如何配置 SLO

    前言 无论是对外提供 IaaS PaaS SaaS 的云公司,还是提供信息技术服务的乙方公司,亦或是金融 制造等各行各业的数据中心.运维部门,我们的一个非常重要的合同承诺或考核评估指标就是:SLA(即 ...

  9. 主题 1 The Shell

    主题 1 The Shell 课程概览与 shell · the missing semester of your cs education (missing-semester-cn.github.i ...

  10. eclipse打不开maven项目中的pom.xml

    1.问题描述 在eclipse中我双击打开maven项目中的pom.xml报错. 2.产生原因 正如报错中描述的那样"Failed to create the part's controls ...