前端里移动端到底比pc端多哪些知识?
端里移动端到底比pc端多哪些知识,为啥面试时好多公司都问h5水平如何?
我做过几年的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版本的都有,有兴趣的朋友可以加群 250777811,一起交流,一起进步!
前端里移动端到底比pc端多哪些知识?的更多相关文章
- PC端和移动端在前端开发上的一些区别,前端里移动端到底比pc端多哪些知识
(1)———————— 前端里移动端到底比pc端多哪些知识,为啥面试时好多公司都问h5水平如何?我做过几年的web前端开发,就简单谈谈自己的感受吧.首先来看看PC端和移动端在前端开发上的一些区别: ( ...
- EasyNVR无插件IPC摄像机直播方案前端构建之:如何区分PC端和移动端
EasyNVR前端为了更好的用户体验,不仅仅设有PC客户端,还适应移动客户端: EasyNVR的客户端中PC端和移动端差异有很多.例如: 由于PC端.移动端自身硬件的差异,所需要展示的样式也会存在一定 ...
- EasyNVR摄像机网页无插件直播方案H5前端构建之:如何区分PC端和移动端
背景分析 随着互联网基础设施建设的不断完善和发展,带宽的不断提速,尤其是光纤入户,4G/5G/NB-IoT各种网络技术的大规模商用,视频随时随地可看.可控的诉求越来越多,尤其是移动应用技术和前端技术的 ...
- asp.net Core 使用过滤器判断请求客户端是否为移动端,并实现PC端和移动端请求映射和自动跳转
很多时候我们做网站时单纯的用bootstrap等前端框架实现的前端自适应带给用户的体验并不太好,所以为了提高用户体验会专门针对PC端网页重新设计一套移动端网页,但是怎么才能做到在移动端访问PC页面的时 ...
- htm5移动端开发 和 pc端开发
htm5移动端开发: 移动端开发需要注意的一些事情:http://www.duanliang920.com/learn/web/html5/321.html HTML5移动端手机网站开发流程:http ...
- 移动端穿插着PC端自动化-Python基础(干货)
1.前面已经把所有前期工作完成了 下面进行一些简单的小脚本来更好的了解Python.对Python有一些基础的童鞋理解起来会比较容易,我刚接触的时候也会有点懵的,现在简单的也是没问题了. 大牛请不要喷 ...
- 山西大同大学教务处教师端——可在PC端,手机端操作
解决问题:大同大学教务处官网教师端口一进去就卡住了,点上面一行的菜单无响应 下载方法(学生端 / 教师端 / 验证脚本): 链接:https://pan.baidu.com/s/1MWrJXoPzE ...
- 1、移动端 2、后台 3、 移动端,Web 端 4、 PC端
移动端: 1.公众号:停开心 住总物业 2.app: iso Android 停开心,住总停开心 后台:停开心智慧停车管理平台(所有的停车场) 移动端,Web端: 海投OA,公司OA PC端:收费软 ...
- js判断是在移动端还是在pc端
function chatQQ3(){ if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { //移动端打开 ...
随机推荐
- python 打印三级菜单
要求: 1.用户选择城市菜单编号显示对应的下级菜单 2.可以返回上级菜单,只有在用户确定正常退出时才退出 #!/usr/bin/env python3 # -*- coding: utf-8 -*- ...
- Extjs6获取Grid里的数据(数据源)
{ xtype: 'grid', sortableColumns: false, reference: 'grid', flex: 1, store: 'panoram.Panoram', colum ...
- 数据库-MYSQL安装配置和删除
* 课程回顾: * 完成注册和登陆的功能. * 准备的工作 * 技术.开源jar包 * 开发的功能使用MVC模式 * C:控制层(接收请求和从客户端发送过来的参数) * 接收参数(request对象) ...
- Java入门(2) —— 变量详解、运算符、定义类和定义方法以及方法的调用
1.变量 1.定义变量 1.声明的同时直接赋值 数据类型 变量名 = 值; 2.先声明,后赋值 声明: 数据类型 变量名; 赋值: 变量名 = 值; 2.数据类型 基本数据类型:4类8种 整数 --- ...
- live事件的替代方法on的使用注意事项
根据jQuery的官方描述,live方法在1.7中已经不建议使用,在1.9中删除了这个方法.并建议在以后的代码中使用on方法来替代. on方法可以接受三个参数:事件名.触发选择器.事件函数. 需要特别 ...
- 用PyCharm执行测试成功但无法生成HTMLTestRunner报告
问题:代码写的没问题,执行也成功了,但就是无法生成HTMLTestRunner的报告 其实这是编辑器搞得鬼,编辑器为了方便用户执行测试,都有一项功能,可以用编辑器来调用unittest或者nose来执 ...
- java使用字节流和字符流实现文件复制
大家在Java开发中都会遇到文件复制的文件,众所周知,需要通过文件输入输出流实现. 那究竟该怎么做那,话不多说,直接上代码: 一,使用字节流复制文件 public class FileByteCopy ...
- TC358775XBG:MIPI DSI转双路LVDS芯片简介
TC358775XBG是一颗MIPI DSI转双路LVDS芯片,通信方式:IIC/MIPI command mode,分辨率1920*1200,封装形式:BGA64.
- django全文检索
-------------------linux下配置操作1.在虚拟环境中依次安装包 1.pip install django-haystack haystack:django的一个包,可以方便地对m ...
- WebStorm ES6 语法支持设置&babel使用及自动编译
一.语法支持设置 Preferences > Languages & Frameworks > JavaScript 二.Babel安装 1.全局安装 npm install -g ...