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> <link rel="stylesheet" type="text/css" href="css/public.css" /> <!--rem.js--> <script src="js/rem.js"></script> <style> body,html{overflow-x:hidden;padding-top:0;} #fit{position:relative} </style> </head> <body> <div id="app" v-cloak> <div id="fit"> <img src="images/1.jpg" alt=""> </div> </div> <!--公用js--> <script src="js/jquery_1.12.3_jquery.min.js"></script> <script src="js/vue.js"></script> <!--当前页面js--> <script src="js/index.js"></script> </body> </html>
INDEX.JS:
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如定义移动端去掉就行了 flag = 1; }else{ // 移动端 flag = 2; } break; } } var app = new Vue({ el: "#app", data: { }, mounted:function(){ var _this=this; if(flag==2){ //移动端放大 var conWidth=parseInt($("#fit").width()+($("#fit").width()*0.5)); $("#fit").css({ "width":conWidth+"px", "left":"50%", "margin-left":-conWidth/2+"px" }); $("body,html").css("width",$(window).width()); } } })