移动端和PC端有什么区别
1.PC考虑的是浏览器的兼容性,而移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器使用的都是webkit内核,所以说做移动端开发,更多考虑的应该是手机分辨率的适配,和不同操作系统的略微差异化。
2.在部分事件的处理上,移动端多出来的事件是触屏事件,而缺少的是hover事件。 另外包括移动端弹出的手机键盘的处理,这样的问题在PC端都是遇不到的。
3.在布局上,移动端开发一般是要做到布局自适应的,需要熟练使用rem布局
4.在动画处理上,PC端由于要考虑IE的兼容性,所以通常使用JS做动画的通用性会更好一些,但是CSS3做了很大的牺牲,而在手机端,如果要做一些动画、特效等,第一选择肯定是CSS3, 既简单、效率又高。
5.微信的一些接口组好能去实现一遍,熟悉一下肯定是有好处的,比如通过微信分享文章,title、description、icon等图标的配置,这些还是要会的。
6.百度地图的一些API接口对于移动端来说,LBS是一个非常重要的特性,所以地图这块肯定是要了解的,在加上百度地图这块已经是一个比较成熟的平台了,所以学起来也比较容易。
7.CSS3的动画在移动端用的还是比较多的,但同时也要注意性能。
8.一般PC端用jquery,移动端用zepto,因为移动端的流量还是比较重要的,所以引入的资源或者插件,能小则小,一个30k的资源和一个80k的资源,在移动端的差别还是挺大的。未压缩的jquery是262kb,压缩的jquey是83kb。未压缩的zepto是54kb,压缩的zepto只有9kb。
9.最好能掌握一套完整的前端开发架构,比如模块化、打包、压缩、缓存有条件的还可以做一下自动化测试等等。
10.性能优化,包括首屏的打开速度、用户响应延迟、渲染性能、动画帧率等在手机上都需要特别注意。
移动端和PC端有什么区别的更多相关文章
- 关于移动端和PC端的交互的区别
对于现在的移动端设备的普及,移动端上的用户体验成了一个重要的关注点. 看了一些网上的关于移动端的交互和用户体验的知识,这里总结了一些.若有不足的地方,希望大家能够积极补充. PC端和移动端的产品的设计 ...
- 前端:移动端和PC端的区别
在阿里的几次面试中,总是被问到移动端和PC端有什么区别,当时回答的时候主要是回答了在兼容性.网速.适配.页面布局等方面的不同,但是还是很不系统,所以这里做一个总结. 第一: PC考虑的是浏览器的兼容性 ...
- jQuery 触发事件 移动端和pc端的区别
jQuery 触发事件 移动端和pc端的区别 <pre>mousedown event.pageXmousemove event.pageXmouseup event.pageXtouch ...
- 简述移动端与PC端的区别
1.移动端与PC端的区别 PC考虑的是浏览器的兼容性,而移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器使用的都是webkit内核,所以说做移动端开发,更 ...
- 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究
PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...
- new Date(str)返回的时间结果在移动端比PC端快了8小时
最近开发过程中,后端传过来一个“2018-03-15T17:53:19.6307928”字符串,需要将字符串转换成“2018-03-15 17:53”的格式展示出来.首先我使用了var time=n ...
- JavaScript判断移动端及pc端访问不同的网站
JavaScript判断移动端及pc端访问不同的网站 现在很多网站都是分为两个版本,一个pc端的一个移动端的(响应式除外),针对这两个版本,就需要对访问的设备进行判断,如果是pc,就直接访问pc网站, ...
- js判断游览器是移动端还是PC端
js判断网页游览器是移动端还是PC端 <script type="text/javascript"> function browserRedirect() { var ...
- 检测当前运行环境——移动端与PC端。
方法1: $(function checkBrowser(){ var browser={ versions:function(){ var u = navigator.userAgent, app ...
- 【Javascript Demo】移动端访问PC端网页时跳转到对应的移动端网页
不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,下面是本人测试有效的方式. 1.效果图 PC ...
随机推荐
- Linux 基本操作指南
Linux基本操作 1. su 切换用户 2.exit 退出当前登录用户 3.useradd 用户名 -m 在home目录下 创建一个和用户名同名的目录,并添加一个用户 (有root权限才能 ...
- python练习——小程序
1.打印0-10(while/for) count = 0 while count < 11: print(count) count += 1 for i in range(11): print ...
- angular2 启动步骤
以下内容转自网络 1. 创建项目文件夹 创建一个新的文件夹来保存你的项目,比如一开始有个self就好了 2.安装基础库 首先确保已经安装了node.js 我们使用 npm package manage ...
- pycharm配置git--图文教程
1. 下载git客户端 2. File->Default Setting-> Version Control->Git 3. Path to Git exec ...
- xtu字符串 C. Marlon's String
C. Marlon's String Time Limit: 2000ms Memory Limit: 65536KB 64-bit integer IO format: %lld Java ...
- PTA 04-树4 是否同一棵二叉搜索树 (25分)
题目地址 https://pta.patest.cn/pta/test/15/exam/4/question/712 5-4 是否同一棵二叉搜索树 (25分) 给定一个插入序列就可以唯一确定一棵二 ...
- LA 3890 半平面交
二分查询答案,判断每一个新形成的向量合在一块能否形成半平面交 #include <iostream> #include <cstdio> #include <cstrin ...
- 【zTree】zTree根据后台数据生成树并动态设置前面的节点复选框的选中状态
0.页面中准备树的ul <ul id="treeDemo10" class="ztree" style="display: none;" ...
- PB编译
java -jar wire-compiler-1.8.0-jar-with-dependencies.jar --java_out=./ ngame.proto 其中java_out是指输出要放在 ...
- Codeforces 645D Robot Rapping Results Report【拓扑排序+二分】
题目链接: http://codeforces.com/problemset/problem/645/D 题意: 给定n个机器人的m个能力大小关系,问你至少要前几个大小关系就可以得到所有机器人的能力顺 ...