PC站建立移动端网站的三大方法模式

移动端网站作为移动互联网最主要的入口，能随时展现自身、与目标用户便捷沟通，同时方便手机用户随时随地查询和浏览，有效占领客户“空闲时间”。移动端网站确实是最便捷的宣传册，无论何时何地，遇见何人，你只要打开手机即可以让对方浏览到产品和服务信息，不会错过任何一次宣传和推销。

建立一个适合移动端浏览的网站有很多种方法，主流的方法有自适应网页设计、移动网站和移动APP应用三类，通过这些方法，可以在短时间内将一个已有的桌面网站转换为适合移动设备访问的网站。

一、自适应设计网站

自适应网页设计，就是让同一个网页代码，能够在不同设备上（从桌面电脑显示器到智能手机或其他移动产品设备）都能有更好的浏览体验，因此，站长在建站前，就要考虑好页面布局如何能适应多屏幕浏览，这样移动设备可以通过原网址来浏览桌面站点，看到的是自动适应屏幕大小后的网站。

尽管这种方式使得域名统一了，但如果对于结构复杂、页面反复的网站来说，代码设计具有相当高的难度。

因此，通常自适应网页设计比较适合单栏或双栏等简单版面网站，对于复杂版面较难设计（具体可查看马海祥博客《如何利用“自适应网页设计”实现不同的设备上呈现同样的网页》的相关介绍）。

由于自适应设计的内容使用同一个网址，不会出现重定向，因此对于访问用户来说，不必花时间记忆另外网址，对于网站开发者来说，改造单栏或双栏网站为自适应网站的开发较为简单，只需对CSS进行不大的修改即可。

自适应网页需要手机浏览器支持css3，例如目前的iPhone和Android内置浏览器都支持css3，但诺基亚手机内置浏览器就不支持css3，考虑到老式的手机已经逐步淘汰，这部分用户也可以考虑忽略不计。

同时，自适应网页需要展示更多的图片，较耗费流量，因此也不太适合2G网络用户访问。

对于网站的修改来说，只要在HTML头部增加viewport标签（控制显示尺寸、是否允许缩放、初始比例、上下限等）、MobileOptimized标签（微软为IE Mobile版设置的定义宽度标记）和HandheldFriendly标签（是否对手持设备友好，只有true或者false），在CSS文件尾部增加针对不同屏幕分辨率的规则，布局宽度使用相对宽度，隐藏侧栏，半小时的开发量就可以提升网站的手机移动浏览体验。

1、在HTML头部增加viewport标签

在网站HTML文件的开头，增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放。代码如下：

<meta name="viewport" content="width=device-width, initial-scale=1" />

这段代码支持Chrome、Firefox、IE9以上的浏览器，但不支持IE8以及低于IE8的浏览器。

2、在CSS文件尾部增加针对不同屏幕分辨率的规则

例如使用如下的代码，可以让屏幕宽度低于480像素的设备（如iPhone等），网页侧栏隐藏中部内容栏宽度自动调节，以下代码针对Z-Blog，WordPress相关标签名称只需修改一下即可。

@media screen and (max-device-width: 480px) {
  #divMain{
  float: none;
  width:auto;
  }
  #divSidebar {
  display:none;
  }
}

3、布局宽度使用相对宽度

网页总体框架可以使用绝对宽度，但往下的内容框架、侧栏等最好使用相对宽度，这样针对不同分辨率进行修改就方便。

当然也可以不用相对宽度，那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度，实际上更麻烦。

4、页面使用相对字体（非必要）

在HTML页面上不要使用绝对字体（px），而要使用相对字体（em），对于大多数浏览器来说，通常用em = px/16 换算，例如16px就等于1em。

5、图片自适应（非必要）

img标签的话，只需要设置 max-width: 100%;或width:100%; 语句为：img { max-width: 98%; }

css加载的background-image如何自适应大小呢，其实CSS3中是可以实现的，添加如下语句：background-size:100% 100%;

总之，根据上面步骤进行修改的话，可以很简单地将一个网站修改为适合多种设备浏览的页面，这对于通过手机访问网站的用户来说，的确是一件好事。

二、移动网站

移动网站是指对于现有的桌面网站，按照移动端的设计规则来重新建立一个移动网站，尽管内容和桌面网站一样，但却拥有两个不同网址。通常的移动网站使用子域名的方式实现，例如使用类似m.mahaixiang.cn这样的地址，为移动用户专门定制，内容可以与桌面网站不同，桌面网站的网址检测到移动设备后自动重定向到移动网站页面。

移动网站可以支持非触屏智能手机和触屏智能手机，适合侧重移动设备或专门针对移动设备的网站，使用移动浏览器访问。

很多blog、cms建站程序都有桌面的移动页面入口，网站只需将移动设备用户引导到这个入口即可，通常有wap或HTML5等方式的建站方式。

wap页面主要针对老式手机浏览器和2G用户，例如诺基亚手机用户，页面简洁，很省流量，但目前正处于淘汰过程中。

HTML5的技术门槛较高，单独开发会有不少难度，很多站长采用移动建站工具来生成基于HTML5的移动网站（具体可查看马海祥博客《移动端网站的HTML5前端性能优化指南》的相关介绍）。

虽然手机网站作用很大，但是制作手机网站时的注意事项很多，否则就会造成网站打不开，甚至影响网站的正常使用。

1、使用独立域名

很多站长为了省事，将PC端域名与手机域名使用同一个域名。这本来问题不大，但却忽略了，在移动端，搜索引擎对于PC端的资源是排斥的。也就是说，网站需要有明确的指示给搜索引擎，在什么时候PC端优先，什么时候移动端优先。

如果你不懂做适配设置（具体可查看马海祥博客《PC网站自动适配手机网页的方法技巧》的相关介绍），最好的办法是将PC端网站与手机网站分开，针对移动互联网做适配的手机网站。因而，在搜索有限的情况下，手机网站使用独立域名是最佳的选择。

2、使用HTML5程序

目前大多数网站建设仍然沿用着ASP、PHP、JAVA、NET等程序语言。这些语言对于PC端网站建设来说没有太大的问题，但由于移动设备的屏幕尺寸所决定的各种因素，这些语言所建设的网站在移动端具有一定的局限性。这时候，更轻便、更灵活、具有强化了的Web网页表现的HTML便成了手机网站建设的最佳选择。

3、根据手机特征设计网站

手机屏幕远没有PC的大，因而，无论是在版面设计上还是功能设计上，都需要更注重实操性。

PC端的版式布局并不适合小屏幕的手机浏览及操作，在手机网站设计上，可以根据手机的实际操作情况来排版网站的栏目。

4、使用精简的网页设计

手机网站的版面小，因而在进行手机网页设计时要尽量少使用阴影、渐变等复杂的设计手法，尽量采用简洁大方的版面设计，目前一些潮流的设计方式能够在手机网站上得到很好的体现，在手机网站设计中可以参考或使用。

还有，专业手机网站制作方法中，手机网站一定要注意用户体验，不能单一化，要注意手机的特定人群，这和传统网站制作截然不同，做到上面几点就离成功不远了！

三、移动APP应用

移动APP应用指的是专门在苹果和安卓应用商店里发布移动APP应用，安装后可以直接使用。移动APP应用的开发成本较高，针对苹果和安卓需要两套开发API，不过，移动APP可以允许用户离线使用，还可以访问移动设备的硬件信息，对于交互性强的应用来说较为适合。

对于普通内容类网站来说，使用移动APP应用的好处并不明显。

由于移动APP应用开发门槛较高，因此站长可以使用相关工具来自动生成应用，百度Site App里也有这种功能，可以一键生成iOS和Android应用文件，但是需要网站站长自己去苹果和安卓应用商店提交应用。

目前使用较多的移动建站工具是百度Site App，百度移动搜索会将大部分网站进行转码，转码后的内容比较适合手机移动等小屏幕设备访问，百度Site App这个工具可以支持站长将自己网站转码后的页面进行定制，并部署到自己独立子域名的网站。

对于网站站长来说，通过这三种形式都可以打造适合移动设备访问的网站，自适应网页设计的开发难度小，手机浏览体验好，还支持自适应AdSense广告，但是目前百度搜索还不能很好地识别自适应网页，部分自适应页面会被百度移动搜索进行转码（主要是由于未携带移动网页特征），使得原有的页面设计和AdSense广告都无法显示。

对于期待从百度移动搜索获取流量的网站，应该优先做单独的移动网站，百度对于移动网站的支持较好，在移动搜索结果中会优先显示移动网站，不过，随着智能手机的迅速普及，百度已经逐步开始支持自适应网页在移动搜索中的展现。

对于Google来说，其没有对网页进行转码，因此对于自适应网站来说能够有较好的显示效果，但是对于未经改造的网页来说，会在移动设备展示桌面网站，可能会耗费更多的手机流量。

因此，对于网站站长来说，较为稳妥的移动化方案是，既能提供网站的自适应设计，同时又提供一个单独的移动网站，这样既能让用户得到良好的浏览体验，又能让搜索引擎较好收录。

马海祥博客点评：

手机网站和微信网站都是未来的大趋势，我们要做的应该是以手机网站为基础延伸微信网站功能，再结合PC端网站，实现网站的三站合一。