发布时间：07-31
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页面上，添加以下代码：
<link rel=”alternate” media=”only screen and (max-width= 640px)” href=”http://m.example.com/page-1″>
备注：代码中的像素为最大宽度，其宽度可视情况调整；
w 在简版移动站点页面上，所需的注释应为：
<link rel=”canonical” href=”http://www.example.com/page-1″>
备注：此简版移动站点页面中指向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标签标注，非必要代码，可视具体情况，自行决定是否添加。
看到这里了，顺便了解下 跨屏互联 建站Saas系统吧
市面上已经有不少自建站Saas系统了，为什么还要做跨屏Saas建站系统？这是一个外行不清楚，内行心知肚明的事情，市面上建站系统大多是拖拽式生成，这种做出来的网站代码很乱，对于seo很不好友。从事建站十多年，我见到太多了。
坚守品质，始终采用更利于seo的手写代码开发
我希望打破这个常规，跨屏互联7年自主开发的Saas建站系统，是一个费时费力的事情，我们所有模板都是手写代码开发，虽说是自助建站，但是和定制是一模一样的流程，所以出来的品质也是一模一样。而是自适应终端适配效果非常好。
对其wordpress，好过wordpress
我们是Wordpress十几年的使用者，对于wordpress我们非常熟悉，也非常喜欢，所以开发跨屏Saas建站系统的时候，汲取了来自wordpress的体验和思路。如果你也喜欢wordpress，跨屏互联的Saas建站后台你会感到熟悉。相比于wordpress，它的优势是无需购买服务器部署源码，注册账号就可以拥有前台后台，可以选择模板。
有软著 无风险，和钓鱼CMS建站系统彻底说拜拜
我们申请了软著-计算机软件著作权登记号：2017SR675691，相比于市面上有钓鱼的CMS建站系统，先免费等你下载使用，然后在起诉，选择跨屏互联SAAS建站系统，也省去了侵权风险。
我们的价格幅度从680~4980不等，不同模板不同价格，按工作量定价，让所有人都可以做得起网站，做放心的网站，做优质的网站，做价格透明的网站。
常见问题
- 跨屏互联的优势？
- 跨屏互联始于2007年，专注五合一建站开发服务 以及周边服务像小程序开发、新媒体运营等，坚持手写代码开发 更利于seo，有自主开发的跨屏前端框架，跨屏Saas适配系统，跨屏Saas建站系统，是源头厂商，技术有口皆碑，售后更有保障。
- 跨屏互联的价值观？
- 以建站为例，我们始终坚持规范的符合w3c国际标准的代码开发规范，我们拒绝拖拽式生成，坚持手写html5代码，css3 media query主流技术适配电脑、平板、手机。同时，我们只保留合理利润，拒绝高报价乱报价。
- 跨屏互联LOGO含义？
- 核心元素：以字母 “K” 为核心，“K” 是 “跨屏（Kuaping）” 英文名称首字母。
- 造型与开放包容：“K” 造型有开口设计，象征跨屏互联秉持开放包容的理念。
- 互联互通象征：“K” 由多个红色几何图形组合且相互连接、延展，代表能实现电脑、手机、平板等不同屏幕的互联互通。
- 跨屏互联名称来源？
跨屏互联是一个主打电脑、手机跨屏幕、跨平台互联的SAAS自助建站平台，故名为跨屏互联；对于能够跨屏幕、跨平台自适应的网站故统称为跨屏网站。
- 跨屏互联域名是什么？
- 为了让用户更好记忆，我们不惜高价购买了 kuaping.com 和 kuaping.cn，它是跨屏的拼音，方便快速记忆。
- 联系方式？
- 有事加微信 6133576 回复更及时，更多联系方式参见本站联系方式页面。