Bigcommerce: 网站移动终端项目总结

1. 测试工具

google浏览器的辅助工具：User-Agent Selector和（测试滑动效果的神器）Mobilizer

2. google分析工具导出的各种移动设备：屏幕分辨率访问统计

300 x 371
320 x 480
360 x 640
400 x 615
480 x 800
540 x 960
598 x 360
600 x 1024
640 x 360
720 x 1280
768 x 1024
768 x 1280
800 x 480
800 x 1280
960 x 540
983 x 1561
1024 x 600
1080 x 1920
1280 x 752
1280 x 800
1366 x 768
1440 x 900
1536 x 2048
1920 x 1200
2048 x 1536

由上总结几种界面桌面宽度控制大小如下：

（1）300到400      @media only screen and (min-width: 300px) and (max-width: 400px)

（2）400到480         @media only screen and (min-width: 400px) and (max-width: 480px)

（3）480到540      @media only screen and (min-width: 480px) and (max-width: 540px)

（4）540到600         @media only screen and (min-width: 540px) and (max-width: 600px)

（5）600到720      @media only screen and (min-width: 600px) and (max-width: 720px)

（6）720到800         @media only screen and (min-width: 720px) and (max-width: 800px)

（7）800到960      @media only screen and (min-width: 800px) and (max-width: 960px)

（8）960到1024       @media only screen and (min-width: 960px) and (max-width: 1024px)

（9）1024到1280  @media only screen and (min-width:1024px) and (max-width: 1280px)

（10）1280到2048   @media only screen and (min-width: 1280px) and (max-width: 2048px)

3. 项目开发思路及总结：
1. Bigcommerce程序有移动终端接口，使用的模板名称为:_mobile。批量将 DOCTYPE 等标示转换成 HTML5 格式,使用Html5+Css3技术来控制该模板
2. 各种移动设备桌面大小控制，可以用@media only screen and (min-width: 。。px) and (max-width: 。。px)来解决
3. 在设计稿的基础上，多考虑用户交互等因素，做到简单、易用。比如：产品分类页可以采用瀑布流技术来加载列表

4. 设计稿的icon、logo等图标要做成矢量图，可以根据屏幕分辨率来等比例缩放大小，才不会导致图片模糊

5. 产品广告的flash效果js代码在移动终端显示不正常。广告要加入左右手指滑动的效果