移动端编写部署
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