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代码在移动终端显示不正常。广告要加入左右手指滑动的效果