手机适配，点赞效果，程序员表白程序，开放源码，不断更新（第五篇：第三波）

源码地址：http://www.bigeone.cn/love/index1.html

今天给第四波的故事一：我们的爱情故事，做了手机适配，后面的故事大多都会做手机适配，毕竟现在的智能机时代。

我做了两个页面，一个是PC端，一个是手机端，因为我试过在一个页面里适配PC和手机，是做不到的，很不好看，于是写了两套，然后在进入页面时，分辨当前的手机还是PC，然后跳到不同的页面，所以多了个中转页面。中转页面只有纯JS，应该很快。

代码是如下：

Titlevarua = navigator.userAgent.toLocaleLowerCase();varpf = navigator.platform.toLocaleLowerCase();varisAndroid = (/android/i).test(ua)||((/iPhone|iPod|iPad/i).test(ua) && (/linux/i).test(pf))            || (/ucweb.*linux/i.test(ua));varisIOS =(/iPhone|iPod|iPad/i).test(ua) && !isAndroid;varisWinPhone = (/Windows Phone|ZuneWP7/i).test(ua);varmobileType = {pc:!isAndroid && !isIOS && !isWinPhone,ios:isIOS,android:isAndroid,winPhone:isWinPhone        };if(mobileType.pc)window.location.href="index_pc.html";elsewindow.location.href="index_mo.html";

最近在把所有的资源转到自己的服务器，在加CDN，访问速度应该会快上一些了，等我有点钱了再配上个好点的宽带。

手机版是有些区别的，比如头部我分成两行了，一些字调小了，最主要的还是中间“我们的爱情历程”那里做了很大的改动，如图：

​​

​​

​​

​

在这里，我把PC端居中的边框，给弄成左右开边的边框了，所以拿到源码的朋友，改动的时候需要注意，手机端的页面是index_mo.html,如果只要手机端，直接用这个页面就行。

在这个页面里，我们的爱情历程里

中间的

,第一个li和最后一个li，要复制下来，因为这两个Li是有些特殊处理的，比如边框往上延伸或往右延伸了，然后中间的li，要两两复制才行。这样才会显得和谐。

我还在加上加了个点赞的效果，如果不要的朋友，可以把class="heart"这一段去掉就行。这个点赞是为了以后，看的人如果喜欢，点击了赞的话，会发短信通知朋友。我这边所有的页面的都会渐渐加上发短信的功能，比如表白的时候，不论对方接受还是拒绝，都会发短信通知，这个功能正在做。

而且我也在做可以直接在网页端设置的功能，这样普通的人，不用建站就也可以使用了。