移动端代码部署
Posted huihuihero
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端代码部署相关的知识，希望对你有一定的参考价值。
移动端编写部署
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/397PC和移动代码标示，让百度蜘蛛很容易来识别是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
以上是关于移动端代码部署的主要内容，如果未能解决你的问题，请参考以下文章
译文：18个实用的JavaScript代码片段，助你快速处理日常编程任务