zoukankan      html  css  js  c++  java
  • 移动端代码部署

    移动端编写部署

    1、添加一下js代码,通过这段js来替代媒体查询(标红部分为页面具体宽常见:720/750)单位用rem,
    通过js所得比例为100:1 此时假定html{font-size:100px} 即1rem = 100px 具体代码如下 ↓
    function pgScale(){
        var deviceWidth = document.documentElement.clientWidth;
        if(deviceWidth > 720) deviceWidth = 720;  //720等比例缩放宽度,若原本网页宽度为950,现需要适配成手机端,则这里改为950即可
        document.documentElement.style.fontSize = deviceWidth / 7.2 + 'px';
    }
    pgScale();
    window.onresize=function(){pgScale();};
    
    2、要在head标签 内部加viewport 代码如下 ↓
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport">
    
    3、图片与背景要做自适应处理
    

    移动站适配基础知识点

    跳转代码(PC端修改)
    <script type="text/javascript">
     function browserRedirect() {  
                    var sUserAgent = navigator.userAgent.toLowerCase();  
                    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";  
                    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";  
                    var bIsMidp = sUserAgent.match(/midp/i) == "midp";  
                    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";  
                    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";  
                    var bIsAndroid = sUserAgent.match(/android/i) == "android";  
                    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";  
                    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";  
                    if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {  
                        window.location.href = 'http://m.cq.offcn.com/zg/skgg_m/';
                    }
                }
                browserRedirect();
    </script>
    
    跳转适配
    每个pc版网址都具有一个对应的不同网址,用于提供针对移动设备进行优化的内容。为了帮助我们的算法了解单独的移动版网址,我们建议您使用以下注释:
    
    在pc版网页上,添加指向对应移动版网址的特殊链接 rel="alternate" 标记。这有助于发现网站的移动版网页所在的位置。在移动版网页上,添加指向对应pc版网址的链接 rel="canonical" 标记。
    
    例如,假设pc版网址为http://www.baidu.com/peixun/41.html,且对应的移动版网址为 http:/m.hbaidu.com/peixun/41.html,那么此示例中的注释如下所示:
    
    在pc版网页(http://www.baidu.com/peixun/41.html) 上,添加:
    
    <link rel="alternate" media="only screen and(max- 640px)"    href="http://m.baidu.com/peixun/41.html" >
    
    而在移动版网页(http://m.baidu.com/peixun/41.html) 上,所需的注释应为:
    
    <link rel="canonical" href="http://baidu.com/peixun/41.html" >
    
    注释:PC页、H5页跳转适配最优方案上线公告https://ziyuan.baidu.com/wiki/397
    
    PC和移动代码标示,让百度蜘蛛很容易来识别是PC站还是移动站
    代码位置代码放在<head></head>中间,
    如果是PC站,代码:<meta name="applicable-device" content="pc">
    如果是M站,代码:<meta name="applicable-device" content="mobile">  
    如果是响应式网站,代码:<meta name="applicable-device" content="pc,mobile">
    
    网站禁止转码
    在<head>之间</head>,加入即可。
       <meta http-equiv="Cache-Control" content="no-transform"/>
    
       <meta http-equiv="Cache-Control" content="no-siteapp" /> 
    
    拓展阅读

    https://ziyuan.baidu.com/college#/type=3&cate=mobile

  • 相关阅读:
    usb_submit_urb
    xilinx uboot网卡驱动分析
    kernel: swapper: page allocation failure. order:1, mode:0x20
    Linux格式化硬盘 常用命令小记
    spring3:对JDBC的支持 之 JDBC模板类
    spring3: AOP 之代理机制
    spring3: AOP 之切面实例化模型 ——跟我学spring3
    spring3: AOP 之 通知顺序
    spring3: AOP 之 通知参数
    spring3: 切面及通知实例 Aspectj的aop
  • 原文地址:https://www.cnblogs.com/huihuihero/p/10801105.html
Copyright © 2011-2022 走看看