移动端代码部署

移动端编写部署

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-width: 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

猜你喜欢

转载自www.cnblogs.com/huihuihero/p/10801105.html