ios客户端发现_动画屋后期页面重构与悬浮评论分享模块开发项目总结

         从“看世界杯送流量”项目，遇到响应式布局问题之后，专门钻研了这方面专业的书籍，同时阅读了相关文章。响应式布局简单的说就是使开发的页面在不同设备上都有友好的效果。而最开始“暑期动画屋”的项目，当时并没有采用响应式布局，虽然ipad上可用，其他设备则会有显示问题。这也暴露了，目前所在移动业务事业部前端的问题：

   1.考虑到响应式布局在不同设备上，UI设计师只给了一套UI原型图，而在不同设备上的显示只是根据前端工程师的理解或个人偏好来完成布局。从产品经理的角度以及测试的角度，也并没有对此有极致的要求，基本功能满足即可。这一点需要与UI沟通。

   2.从移动化大趋势来考虑，公司设立移动业务事业部方向正确，在执行细节问题上并没有“移动化”。前端工程师的测试机仅限于自己的手机或者产品经理的ipad或iphone，而具体爱奇艺用户分布并没有数据来支撑，以至于在产品面向ipad或者产品面向iphone上摇摆不定。所以开发前，搞清楚目标用户是哪些，申请足够的测试机。

  重构效果图：

项目介绍

（一）．“暑期动画屋活动”中后期页面的开发

    本项目是对之前没有适配，项目的重构。以前曾有文章指出，看自己的半年前的代码无法阅读。而这个项目与自己之前写代码相隔不久，而从重构的角度考虑，并不能轻松的移植。于是采取了比较极端的重构方法：重写。这次重写也是应用响应式布局技巧、独立适配的第一个项目。

    整个布局框架写好后，在写样式表时，主要需要考虑以下几点：

    1.由于此项目的框架的外层构造都用div标签而且流线型构造。故采取了如下代码：

div{
	width:100%;
}

   用以保证，每个div都根据媒体查询设置的可见区域的宽度填充满可视区域。此处没有固定宽度，是在媒体查询属性中，根据划分媒介不同设置了不同可是宽度基础上进行的。

    2.项目中目前处理背景图并不能得心应手，故将背景图设置成img标签，给予“bg”的id。此处对图片的处理也值得以后项目借鉴。

#bg img{
	width:100%;
}

相应的下载按钮则是从绝对位置角度设置具体位置，大小则是根据视窗大小设置了一个百分比。

#download img{
	width:25%;
	position:absolute;
	top:60%;
	left:70%;
}

   3.设定好图片和div后，剩下的就是按照不同机型对字体大小和按钮top参数的调整适配。

/*ipad*/
@media only screen and (max-width: 1024px) and (min-width: 710px){
#download img{
	top:44%;
}
}
/*iphone4*/
@media only screen and (max-width: 360px) and (min-height: 480px) {
#download img{
	top:22%;
}
#font1{font-size: 38px}
#font2{font-size: 26px}
#font3{font-size: 20px}
}
/*iphone5*/
@media only screen and (max-width: 320px) and (min-height: 568px) {
#download img{
	top:19%;
}
#font1{font-size: 38px}
#font2{font-size: 26px}
#font3{font-size: 20px}
}

效果图如下：

   1.项目的需求

   开发一个可以应用到各种活动的分享和评论的模块，适用于手机，不用于平板显示。

   2.结构非常简单，主要新的地方在样式上。

.share_floatShare{
	width: 100%;
	margin-left:auto;
	margin-right: auto;
	height:100px;
	position:fixed;
	bottom:0;
	z-index:9999;
	opacity:0.5;
	background-color:#000000;
}

  3.交互方面主要处理两方面问题：

  进入页面，从后台取出评论数返给右侧按钮。

  单击左右按钮，调取相应的界面，这里面涉及到对安卓和ios设备的检测。代码如下：

var deviceAgent = navigator.userAgent.toLowerCase();
  var agentID = deviceAgent.match(/(iphone|ipod|ipad|android)/);
if(agentID.indexOf("iphone")>=0){
     
     }
    if(agentID.indexOf("android")>=0){}

  4.模块化

  既然要模块化就要涉及模块引用的便利性和稳定性。

  （1）便利性做的主要是用js原生代码生成html结构，并生成link标签引入相应的css文件。即最后模块的引入只需在目标页面中插入一个js脚本块即可。

  （2）稳定性则主要涉及引入css文件与当前页面不会引发命名冲突，这里将涉及到的id与class都用share_前缀进行了处理，删除了多余内容。

ios客户端发现_动画屋后期页面重构与悬浮评论分享模块开发项目总结,,5-wow.com