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(){ } })