• 专题移动端放大页面


    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());
            }
        }
    })
  • 相关阅读:
    2022.44 AI在视觉领域进展
    2022.46 魔搭社区
    2022.38 AIOT产业结构
    2022.41 全真互联
    2022.39 AIOT和元宇宙
    2022.45 AIGC
    2022.42 全真互联技术
    2022.40 AIOT和双碳目标
    2022.43 全真互联应用
    2022.37 AIOT的应用场景分类
  • 原文地址:https://www.cnblogs.com/liubingyjui/p/13181730.html
Copyright © 2020-2023  润新知