News
新闻资讯
网站首页 >> 新闻资讯 >> 软件资讯

移动端前端开发与PC端比有哪些不同?

文章来源:六方科技 已浏览:2801
2016-11-11
1、语义化,结构化
从以切图为导向到以语义化为导向的页面生产,使得页面的结构和层次更加清晰。语义化的页面通常也是结构化的,结构化的页面更利于移动端做多分辨率适配与多浏览器兼容。

由于移动设备屏幕实际显示像素(物理像素 / 设备像素比 = 实际显示像素)远小于PC屏幕,导致移动Web通常在一屏之内没办法展示出需要的内容,这就会存在更多DOM显示/隐藏的交互,结构化的页面能更好的管理和操作DOM。

移动Web还需要适配不同分辨率,分辨率的变化(比如:横竖屏切换)也可能会导致页面DOM显示/隐藏的交互。无论是上面说的JS操作DOM还是CSS3的Media Queries,语义化的、结构化的页面都是更加的选择。

2、移动设备特性
移动设备特性通常分为两类:影响视觉的和影响触觉的,很多具体的HTML5和CSS3技术就是为了适应移动设备特性的解决方案,包括:touch event、geolocation、orientation等。

影响视觉包括:
  • 屏幕分辨率
  • 设备像素比
视觉部分会直接影响设计稿和产出的图片,也就是上面 @简单 答案里面提到的二倍图、三倍图。

影响触觉包括:
  • 触摸屏(用手指操作)
  • 传感器(陀螺仪、GPS等)
  • 软键盘
触觉部分会影响到人机交互输入接口,像 @简单 答案里面提到的Touch手势、滑动等都属于输入,还有其他的语音识别、GPS、方位感应等,对应的HTML5、CSS3技术实现可以查阅W3C的相关文档。

3、浏览器(WebView)兼容
不要用理论解释移动浏览器的兼容BUG,
不要用理论解释移动浏览器的兼容BUG,
不要用理论解释移动浏览器的兼容BUG,

重要的事情说三遍,有好多BUG根本就是浏览器的实现缺陷导致,很多问题是无法绕过的,遇到这样的问题只能尽量改进技术实现,但通常都没有完美的技术解决方案,除非更改需求交互和设计,对于一些不是很严重的问题,我都会无视。

在一开始设计产品需求和细节时,就应当把一些技术性的问题考虑进来,尽量避免在测试阶段或上线之后才发现,这通常需要很多的经验积累才能做到,需要耐心慢慢来。

4、移动端调试
95%的调试可以在Chrome DevTools 移动设备模拟器下完成,剩下的5%才需要特殊的调试技巧。

5、关于测试

上面说的是开发调试,而非测试。测试是由专门的QA部门完成,目前移动端测试还没有比较先进的测试手段(也许有我不知道而已,这块需要多交流),基本都是靠人工。

  济宁网站制作济宁软件开发济宁网站建设济宁网络推广济宁网络优化济宁网站设计首选六方科技

最新资讯
点击立刻咨询