标注Meta声明这一适配方案仅在百度移动搜索中生效,即只有当用户通过百度移动搜索访问站点时,适配才会生效;
<meta http-equiv="mobile-agent" content="format=xhtml; url=网站地址">
<meta http-equiv="mobile-agent" content="format=html5; url=网站地址">
<meta http-equiv="mobile-agent" content="format=wml; url=网站地址">
<link rel="alternate" media="only screen and (max-width: 640px)" href="网站地址">
<!--百度判断手机终端并自动跳转uaredirect.js代码及使用实例-->
<script src="js/uaredirect.js" type="text/javascript"></script>
<script type="text/javascript"> uaredirect("网站地址,网站地址");</script>
uaredirect.js这个文件在下方
浏览器对自适应识别校验代码
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
注意:这个meta,user-scalable=yes 是声明网页可以缩小放大。
通用搜索引擎对自适应识别校验代码
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
注意:这两个meta,no-siteapp和no-transform,是告诉搜索引擎不要把网页转码。
自适应网站设计对百度友好的关键
<meta name="applicable-device" content="pc,mobile">
注意:这个meta标签,表示页面同时适合在移动设备和PC上进行浏览。
现在开始搭建
第一步,非常简单,把如下代码直接复制到<head></head>里面。
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
第二步,在 <head> </head >里加上如下css代码。
<style type="text/css">
@media(max-width:750px)
{
// 这里表示在你的屏幕小于多少宽度的时候加载 另一个代码这个看你的需求
}
</style>
让一个你要隐藏 某一块的时候 display:none
如果你有正文 正文图片 用max-width="90%" 这个按照你的要求来定 以百分比 rem 看你喜欢为单位
uaredirect.js文件
function uaredirect(f) {
f = addUrlParam(f);
try {
if (document.getElementById("bdmark") != null) {
return
}
var b = false;
if (arguments[1]) {
var e = window.location.host;
var a = window.location.href;
if (isSubdomain(arguments[1], e) == 1) {
f = f + "/#m/" + a;
b = true
} else {
if (isSubdomain(arguments[1], e) == 2) {
f = f + "/#m/" + a;
b = true
} else {
f = a;
b = false
}
}
} else {
b = true
}
if (b) {
var c = window.location.hash;
if (!c.match("fromapp")) {
if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i))) {
location.replace(f)
}
}
}
} catch (d) {
}
}
function isSubdomain(c, d) {
this.getdomain = function (f) {
var e = f.indexOf("://");
if (e > 0) {
var h = f.substr(e + 3)
} else {
var h = f
}
var g = /^www\./;
if (g.test(h)) {
h = h.substr(4)
}
return h
};
if (c == d) {
return 1
} else {
var c = this.getdomain(c);
var b = this.getdomain(d);
if (c == b) {
return 1
} else {
c = c.replace(".", "\\.");
var a = new RegExp("\\." + c + "$");
if (b.match(a)) {
return 2
} else {
return 0
}
}
}
};
function addUrlParam(f) {
var add_params = ["uid"];
var url = window.location.href;
for (var i = 0; i < add_params.length; i++) {
var p_key = add_params[i];
p_key = p_key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var reg = new RegExp("[\\?&]" + p_key + "=([^&#]*)(&|$)");
if (reg.test(url)) {
var mts = url.match(reg);
if (mts) {
var p_value = decodeURIComponent(mts[1]);
if (f.indexOf('?') > 0) {
var b = new RegExp(p_key + "=([^&#]*)");
if (b.test(f)) {
f = f.replace(b, p_key + "=" + p_value);
} else {
f += "&" + p_key + "=" + p_value;
}
} else {
f += "?" + p_key + "=" + p_value;
}
}
}
}
return f;
}
function pcredirect(f) {
//return;
f = addUrlParam(f);
try {
var c = window.location.hash;
if (!c.match("frompc")) {
if ((!navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i))) {
location.replace(f)
}
}
} catch (d) {
}
}