最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

前端里移动端到底比 PC 端多哪些知识,为什么面试时好多公司都问 H5 水平如何?该从哪里入手学习?-H5教程

来源:http://erdangjiade.com/topic/133617.html H5程序员 2017-10-27 12:55浏览(191)

一直觉得pc端和移动端没啥区别。。就按照手机的分辨率做就好了。多几个拖放什么的事件。。但貌似经过几次面试对移动这方面的要求越来越高,而且还经常被问到一个h5的概念。这就不明白了、、不就html5么。。。多几个语义化标签而已么不就。。这有啥可回答的,,,为啥说h5是为移动端量身打造的?还老问我会不会。。我感觉会h4肯定就会h5啊。。另现在经过面试经常被问,想求教一下怎么学移动端这块。之前网上教程基本都是pc端的。求大神们给小弟解解惑。以及推荐点视频资料
另外大婶们啊。。人总问我有没有用过h5技术建立页面。。。啥叫用h5技术建立页面啊。。。就用写把导航的p改成<nav>。。。文章改成section?<video>?就这些?
请问有没有啥手机的教程谢谢

回复内容:

我做过几年的web前端开发,就简单谈谈自己的感受吧。

首先来看看PC端和移动端在前端开发上的一些区别:

(1)PC考虑的是浏览器兼容性,移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器用的都是webkit内核,所以做移动端开发,更多考虑的应该是手机分辨率的适配,和不同操作系统的略微差异化;

(2)在部分事件的处理上,移动端自然是偏向于触屏的,所以触屏事件的一些规律要多摸索一下,另外包括移动端弹出的手机键盘该如何处理,这样的问题在PC上肯定不会遇到,但在移动端,如果你没有经验,处理起来是相当麻烦的;

(3)在布局上,移动端开发一般是要做到布局自适应的,在这里我推荐用rem的解决方案,具体实现可以百度一下,相对比较简单,处理起来也比较灵活;

(4)在动画处理上,PC端由于要考虑到IE的兼容性,通常用JS做动画的通用性会好一些,但相比CSS3却牺牲了较大的性能,而在手机端,如果要做一些动画、特效等,第一选择肯定是CSS3,既简单,效率又高。

区别就说到这里,也许还不完全,我也是想到哪就说到哪,下面来谈谈如果要做移动端的web开发,也就是题主说的h5开发,在已有PC端的web开发基础上,还需要再研究哪些技术:

(1)微信的一些接口最好都能去实现一遍,熟悉一下肯定有好处的,比如领导让你通过微信分享的文章,title、description、以及icon图标怎么配置,你说你不清楚,那就太水了;

(2)百度地图的一些API接口,有时间也去熟悉一下吧,对于移动端来讲,LBS还是一个非常重要的特性,所以地图这块肯定也是需要了解的,再加上百度地图已经是一个比较成熟的平台了,学起来也不费事儿;

(3)CSS3的动画去熟悉一下,至少最基本的一些动画实现和算法要了解,在移动端应该也算用得比较多的;

(4)一般pc用jquery,移动端用zepto,这没什么好说的,在这里主要是想提醒大家,移动端的流量相对还是比较重要的,所以引入的资源或插件,能小则小,一个30k的资源和80k的资源,在移动端还是相差挺大的;

(5)最好能掌握一套完整的前端开发架构,比如模块化、打包、压缩、缓存、发布,有条件的还能做一下自动化测试等等,我用过的有fis,还不错,牛逼的朋友可以自己写一套,另外再多说一句,如果想快速提升自己的前端开发技术,钻研前端架构这块是一个非常好的方向。

这几个月,还抽空写了一个APP,android和ios版本的都有,有兴趣的朋友可以加微信:laoheipm,一起交流,一起进步! 他们要问的不是HTML5新增的tag,甚至不仅仅是CSS3动画,而是在手机上搞交互、单页app,有一些东西是得稍微注意的。

就我个人观点,主要是以下区别。

1. meta viewport
2. 像素密度、媒体查询等
3. 触摸事件的处理
4. 分辨率对布局的影响
5. 一些零零碎碎的hack,如fast click等等
6. 性能优化,包括首屏打开速度、用户响应延迟、渲染性能、动画帧率等等,在手机上需要特别注意

大概就这样子。

对于我来说,Web前端在PC和在移动平台上确有不少差别,但并不能用来区分水平的高低,在面试时还是应当多注意应试者在js上的基础功夫。 H5 的公司不去,他也不懂,你也不懂,大家聊什么呢。 说几个html5常用的题主没提到的东西,xhr2、cors、formdata、blob、filereader、dataurl、localstorage,这些题主未必没用过,只是没有注意到。html5到底包含哪些已经实用的、草案中的东西,哪些浏览器支持,请参考w3c发表的最新的移动互联网发展路线图,每年更新2次。
section和p什么区别,一个有语义一个没语义。 我是做后端的,因为这个学期期末作业要独立做网站,我就学了下HTML5,
我想说的是楼主说的nav ,section,只是书里的第一单元~第二单元而已,webGL什么的以及数据库的开发楼主应该还没看。
不用js的HTML5根本就没体现出HTML5的大部分特性
手机端网页和PC端网页本质上是一样的,所谓的H5营销,即使用了大量的HTML5+JS动画,这些动画效果是传统android 用openGL开发是比较困难的,以网页为载体呈现的效果更好。

题主可以先熟练JS,然后学学jQuery,然后慢慢摆弄 HTML5+CSS3+JS,特别是js的部分。 不谈技术,我告诉你这个情况大概是怎么演化而来的。
首先,移动开发大热,包括h5。
然后,某公司有个js或者css大神,他做出了完美的响应式,或者漂亮的框架或者等等
然后,他告诉同事和领导,他在研究的是h5。别人给了他一个标签“h5大神”
然后,领导以及别的team领导想,我还想招个这样的员工,hr想,h5哥哥好厉害,我也要多招几个来。
然后,分派给其他面试官的任务,去问问这个面试的会不会h5,h5厉害不厉害。面试官想,哦,面试h5,我想想问些什么问题,于是乎就出来两类面试官,一类真的在面试h5,还一类问你懂不懂h5标签。
最后,这个故事的结局题主已经知道了。 xhr2、cors、formdata、blob、filereader、dataurl、localstorage + 拖拽 websql 定位 canvas 把H5挂在嘴边的是不懂技术的,至少是不懂前端的,这样的公司慎去 H5是个营销概念,不是技术概念。
他们要H5就是要你能做那种在手机上能看的各种动画效果的网页。
比如这些 那些过目不忘的H5页面 建议题主可以看看《html5从入门到精通》 很适合快速入门者
做移动端的开发 肯定要掌握html5相关知识的
学完这个建议题主在去看看 Android 、iOS、wp等应用的界面设计教程
既然要学 就学全
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2