淘宝天猫的触屏版前端分析

今天看看了解了淘宝天猫的触屏版的页面，以前在做公司微网站的时候就了解过，今天简单做下记录：

触屏版域名都是前面加个m.taobao.com    m.tmall.com，实现方式应该就是在访问主域名的时候有个判断，如果是移动端的就是指定到这两个相应的域名下。

具体实现方式有很多种，以前我了解过一种很简单的就是通过js实现方式如下：

var system ={win : false,mac : false,xll : false};
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
if(system.win||system.mac||system.xll){
}else{
    window.location.href="wap/index.html";//指定目录或域名
}

当然了淘宝和天猫的肯定不是用的这种，具体用的什么应该就是服务器处理的。

这里先从首页开始，一下是我通过pc端浏览的截图

 

首页做了相应版本（主要是根据浏览器分辨率的大小），根据客户端的不同去选择相应的样式，这里显示的应该就是最小的一种样式。

实现方式：@media only screen……

/* iPad及以下，所有小于（不等于）960宽度的平板电脑*/
@media only screen and (max-width: 959px) {}
/* 仅iPad竖版，所有小于（不等于）960宽度的平板电脑的竖版*/
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* iPhone及以下*/
@media only screen and (max-width: 767px) {}
/* 仅iPhone横版，包括某些平板电脑的竖版*/
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* 仅iphone4 竖版*/
@mediaonly screen and (max-width: 479px) {}

 

大概的应该就是以上几种。

 

内页的实现方式和首页有不同，内页相对来说简单化了，就是只一种样式，无论是什么分辨率的都是同样的一种样式，显示如下图：

内页整体的结构都是采用百分比，这样就能实现在不同分辨率都是全屏显示的效果。这里很少使用背景图片，相应的图标都是以img的形式展示。

这里看有些图片很不清楚，以前我看过他们图片的实现方式一个ppt，上面说，在上传图片的就是就做了相应的处理，把图片做成相应尺寸，根据访问着浏览的大小去选择相应的图片。