专题移动端放大页面

 

专题移动端放大页面_第1张图片

 

 

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" />
       
      <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>
    
    <script src="js/jquery_1.12.3_jquery.min.js">script>
    <script src="js/vue.js">script>
    
    <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());
        }
    }
})

 

你可能感兴趣的:(专题移动端放大页面)