常见建立手机网站的实现方法 自适应或者单独手机站

如今移动互联网可以说已经和传统的PC短入口流量不相上下,甚至有些行业大部分就可能是移动端的用户访问。所以,我们在搭建传统的网站时候,其实是很有必要拥有建立手机网站的。以前我们给客户做企业网站的时候,只要考虑PC端的网站展示就可以,且如今基本上在合作项目书上都要表明是否需要手机端,基本上客户都是有需要的。

如何创建手机网站?(常见建立手机网站的实现方法)

那具体我们在创建手机网站的时候采用何种方式呢?我们常规的认识就可以大家知道的网站,我们访问的网站是PC端,然后需要将网站制作成适合手机端访问的。但是实际上移动端的网站还有其他方面,我们一并梳理下这个知识的认知,这样我们在接待客户项目的时候是有不要提供更广的服务项目的。

第一、自适应移动端网站

目前我们常规的做法就是将PC网站兼容自适应手机端、平板电脑端的移动网站。这个一般我们采用前端框架的时候是直接自动的,然后根据适应情况微调即可。以前我们不采用前端的时候自己调试确实是比较麻烦的。这个是老蒋目前采用的最为简单的办法,比如使用BS、LAYUI前端比较容易实现。

第二、单独的移动端网站

我们是不是经常有看到访问的网站不是自适应的,而是wap.itbulu.com这样子的模式?没错这个是单独给网站做的移动端网站。为什么还要这么做呢?一来是早期的PC端网站没有移动端自适应,而且改造起来比较麻烦,所以我们一般也就是单独给客户做二级域名的移动端网站。

然后我们会在PC端网站使用代码直接可以检测是哪个移动设备,然后跳转。这个我们可以参考老蒋在"用JavaScript实现网站自动跳转电脑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= 'wap.itbulu.com';
} else {
window.location= 'www.itbulu.com';
}
}
browserRedirect();
</script>

根据我们实际的地址修改,添加到我们对应的两个页面模板中。

第三、其他移动项目

一般对于网站而言,我们采用自适应或者是跳转单独的移动和PC端网站是比较常见的。但是对于移动端网站建立手机网站目前可做的项目还是很多的。比如几年前都比较流行APP,比如有些公司就喜欢给客户推荐开发APP,但是对于传统行业来说,他们要APP何用?

所以我们那时候是不会给客户推荐这个产品的。除非是服务行业可能确实需要。但是自从有小程序后,这个确实是可以建议客户安装的。比如可以将网站集成到小程序中,这个也算是网站的移动端开发。其他譬如公众号、微博等等可以作为辅助类,具体还是要看行业的。

总结,从上面我们可以看到建立手机网站也是比较简单的。实际上有时候套用固定的模板,手机网站比PC端网站还好做一些,但是最好是采用自适应。但是有些人认为自适应的网站在移动端效果不好,尤其是移动端搜索引擎效果不好,于是我们看到确实不少人单独开发的移动端网站。

本文出处:老蒋部落 » 常见建立手机网站的实现方法 自适应或者单独手机站 | 欢迎分享( 公众号:站长事儿 )