常见的4种网站移动适配方案_网站建设_资讯

常见的4种网站移动适配方案

最近更新于 2020-07-28 - 跨屏互联-建站

文章导读：本文主要阐述了“常见的4种网站移动适配方案”网站适配也叫做跨屏适配、跨屏移动、移动适配等等，顾名思义都是解决pc网站在手机下的显示问题，常见的跨屏适配有以下4种方法。1...，本文由跨屏互联最后更新于2020-07-28，全文共2392个字，预计阅读时长7分58秒。

网站适配也叫做跨屏适配、跨屏移动、移动适配等等，顾名思义都是解决pc网站在手机下的显示问题，常见的跨屏适配有以下4种方法。

1.基于搜索引擎蜘蛛访问的适配
1.1百度适配标注
适配作用：指引搜索引擎蜘蛛爬行和抓取PC页面对应的简版移动站点页面；在站点PC页的源代码头部嵌入一行或多行meta信息，由meta信息来指明该PC页对应的简版移动站点页面的URL，以及该URL对应页面的格式，百度将根据用户终端类型选择相应的简版移动站点页面。（无对应关系的PC页面无需添加meta ）
meta适配声明格式说明：
<meta name=”mobile-agent” content=”format={wml|xhtml|html5}; url={当前PC页对应的简版移动站点页URL}”>

meta适配声明示例：
在http://www.xxxx.com页面源代码<head>标签内添加代码，如下
<meta name=”mobile-agent” content=”format=xhtml; url=http://wap.xxxx.com/”>
备注：”format=html5”可根据移动站点页面的真实协议语言进行标记；
生效情况：
标注meta声明这一适配方案仅在百度移动搜索中生效，即只有当用户通过百度移动搜索访问站点时，适配才会生效，通过其他渠道则不生效。在标注准确对应关系无误的情况下，大约需要七天左右的时间生效，老旧页面会有延迟。但百度不保证一定能在移动搜索结果中按照您标注的对应关系进行替换。
1.2谷歌适配标注
适配作用：为了帮助谷歌蜘蛛了解PC页面与手机页面的对应关系（无对应关系的页面则无需添加）
适配声明说明：
l 在PC页面上，添加指向相应简版移动站点页面的特殊链接rel=”alternate”标记。这有助于谷歌bot发现网站的移动版网页所在的位置；
l 在简版移动站点页面上，添加指向相应桌面版网址的链接rel=”canonical”标记；
适配声明示例：
例如，假设桌面版网址为http://example.com/page-1且相应的简版移动站点页面网址为http://m.example.com/page-1。那么此示例中的注释如下所示：
w 在PC页面上，添加以下代码：

备注：代码中的像素为最大宽度，其宽度可视情况调整；
w 在简版移动站点页面上，所需的注释应为：

备注：此简版移动站点页面中指向PC页面的rel=”canonical”标记是必需的；
生效情况：此适配声明仅在谷歌移动搜索中生效；
2. 基于用户在移动终端访问PC页面的适配
适配作用：由于触屏版页面有助于提高用户体验度，因此网站需做好PC页面与手机站点页面之间的适配，以及手机站点各个版式（触屏版与简版）之间的适配（通过在服务器端进行设置或使用AJAX技术实现不同终端间的页面跳转）。当手机用户通过手机访问网站的PC页面时，页面将自动跳转到该PC页面对应的手机触屏版页面。
适配举例：
当用户使用手机访问http:// www.xxxx.com/时，页面自动适配跳转至相应的触屏版首页（http://m.xxxx.com/）；
生效情况：
当用户通过手动输入网址，或者通过导航站等渠道访问站点时，适配跳转同样有效。
3. 基于用户在移动搜索结果访问网站的适配
适配作用：同样为了提高用户体验度，网站需做好手机站各个版式（触屏版与简版）之间的适配（通过在服务器端进行设置或使用AJAX技术实现不同终端间的页面跳转）。当手机用户通过搜索引擎（百度，360，谷歌，搜狗）的移动搜索结果链接访问简版手机站点页面时，页面将跳转到相对应的触屏版页面。
适配举例：
当用户使用手机通过移动搜索引擎的搜索结果链接访问http://wap.xxxx.com/时，页面自动适配跳转至相应的触屏版首页（http://m.xxxx.com/）；
4.其他移动站点页面标签标注说明
4.1 DOCTYPE标签标注
标注作用：DOCTYPE标签标注有助于搜索引擎识别该页面是否适合移动设备浏览；
标注说明：<!DOCTYPE> 标签声明位于文档中的最前面的位置，处于 <html> 标签之前，并根据不同的页面协议，添加不同的<!DOCTYPE>标签，具体如下：
l xhtml协议的手机页面中可以使用如下DOCTYPE：
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>
l wml协议的手机页面可以使用如下DOCTYPE：
<!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.1//EN” “http://www.wapforum.org/DTD/wml_1.1.xml”>
l HTML5协议的手机页面可以使用如下DOCTYPE： <!DOCTYPE HTML>
4.2 meta标签标注
如果该网页只适合在移动设备上进行浏览，例如http://wap.xxxx.com/，则在该页面源码的<head>标签内可以添加代码如下：<meta name=”applicable-device” content=”mobile”>
备注：对于方案第四点中提到的DOCTYPE标签与meta标签标注，非必要代码，可视具体情况，自行决定是否添加。