移动互联网终端

移动端人机交互方式同PC端发生了本质的变化，在PC端使用鼠标和键盘进行交互，而移动端使用的是手指的触摸和滑动。PC端开发时主要监听鼠标事件，例如mouseEnter（鼠标进入事件）、mouseMove（鼠标移动事件）、mouseLeave（鼠标离开事件）。而在移动端监听事件为触摸的开始事件，触摸移动事件，以及触摸的结束事件。在本设计中商品详情页通过选项卡来达到切换显示基本信息、商品细节信息以及评论信息。在基本信息通过幻灯效果显示商品的大图，通过手指的滑动来控制幻灯的显示。移动端手势操作效果图： 实现的方法是监听手势的开始事件，记录手指在屏幕上的起始位置。监听手势的移动事件，获取移动中手指的坐标，并将移动的手指坐标减去起始位置的坐标得到手指移动的距离。然后实时地去改变幻灯片的transform的值来达到幻灯移动的效果。最后需要监听手势的结束事件，在该事件的处理函数中得到手指最后的位置，同样使用最后的位置减去手指的起始位置得到最终手指移动的距离，判断手指最终的移动距离是否大于滑动的临界值，本设计在此处设置临界值为100px，如果大于临界值则切换幻灯片，否则不进行切换。 在切换中特殊情况是幻灯处于第一张并向左滑动，以及最后一张并向右滑动，这两种操作都是无效的因为第一张幻灯左侧以及第二张幻灯右侧都是没有图片的。如何友好的告诉用户已近滑动到了第一张或者最后一张是提升用户体验的关键

移动端页面布局 1、弹性布局（100%布局，流式布局）——拉勾网、天猫首页 好处：充分发挥大手机的优势——显示内容越多 缺点：屏幕过大，间距过大，比例失调。 特点： 顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变； 中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边。 2、等比缩放布局（rem布局）——网易、淘宝首页 视口(viewport)设置： 在html上根据不同分辨率设置不同font-size，通过js计算出来 什么是DPR 设备的物理像素和逻辑像素（真实像素/css像素）的对应关系，即物理像素（设备像素）/逻辑像素，默认缩放为100%的情况下，设备像素和CSS像素的比值。例如iphone6，屏幕逻辑像素为375PX，而购买时所知的750PX，这就是屏幕的物理像素。 其实每个手机的DPR不全都是一样的，例如我们的iphone6它的DPR是2，但是iphon6Plus它的DPR却是3，在早先的移动设备中呢，是没有DPR这个概念的，随着我们技术的发展，移动设备的屏幕像素密度越来越高，苹果公司从iphone4开始推出了视网膜屏幕，之所以叫视网膜屏幕，是因为屏幕的PPI，也就是屏幕像素密度太高了，人的视网膜无法分辨出屏幕上的像素点。 iphone4的分辨率提高了一倍，但屏幕尺寸却没有变化，这意味着同样大小的屏幕上，像素多了一倍

首先设置meta属性，如下代码： < meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" > 使用如下代码就能实现移动端的适配： html { font - size : - webkit - calc ( 13.33333333 vw ) ; font - size : calc ( 13.33333333 vw ) ; } 100vw相当于浏览器的window.innerWidth，是浏览器的内部宽度，注意， 滚动条宽度也计算在内 ！那么1vw就是表示1%的屏幕宽度。 其中的 13.33333333vw 是怎么来的呢？就是你的设计稿是750px，那么设计稿的1px就是0.133333333vw，那么100px就是13.33333333vw。也即是html的font-size设置为100px相当于1rem（设计稿为750px）。那么我们就可以很轻松的换算设计稿中的单位为rem了，比如一个元素宽度为150px，转换为rem就是1.5rem。其他尺寸设计稿的计算方式依次类推。 参考网易新闻移动端的写法： /** * view-port list: 320x480 320x568 320x570 360x592 360x598

智能手机发展 确实 很迅速，像今年，我的大部分工作就都在移动端网页上。 再往前些年，看到的手机版/移动版网页，限制于浏览器与手机性能，2g网络速度等 网页设计无非是蓝、黑、白，界面单调，并且要尽可能的设计简单。 现在情况就大不相同了，软件上webkit内核浏览器大行其道，硬件突飞猛进，网速来说，4g正 炒得火热。 下面就和大家分享一下我的一些移动端网页设计经验与心得。 ⒈ 分辨率 这应该是移动端网页最关心的问题了，因为移动设备五花八门，各种分辨率都有。要想在这些设备上都能有良好的浏览体验，得花一番功夫。 使用viewport：这已经是移动端网页的必备了，它可以设定页面的宽度，是否允许缩放等等。 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 一般设置width=device-width，就是设置为设备的屏幕宽度，当然也可以是具体数值 百分比与max(min)-width使用：移动端网页不仅分辨率不一，而且随时可以横竖屏切换，所以百分比宽度设定非常必要，再配合max(min)-width限制最大(小)宽度，能有效的适应各种分辨率， 若为此还有特别需求，可看下一条，"使用Media Queries" 使用Media

当我们在做手机端H5网页设计稿时（当然包含微信端的H5网页设计），如果没有做过类似的移动端的设计，UI设计师和前端工程师肯定会纠结的。如果是app设计师，就不会那么纠结啦。 延伸阅读： 2015年度最值得学习的10个H5案例（各种经典，推荐收藏） 这可能是近半年做得最好的4个H5传播案例 还没搞懂H5营销？他们已经开始在玩“虚拟现实”了！ 一个插线板的H5怎么就火了？大家明明是去看周鸿祎的八卦的 那么多手机屏幕尺寸，设计稿应该按照哪一个尺寸作为标准尺寸。现在已经有2K分辨率的手机屏幕了，设计稿是不是也要把宽高跟着最大分辨率来设计。显然不是。 请注意：（以下所有讨论内容和规范均将viewport设定为content=”width=device-width”的情况下） 也就是我们的H5页面前端代码里面必须包含 <meta content=”initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width” name=”viewport” /> <meta content=”telephone=no” name=”format-detection” /> 根据目前市场流行的手机移动终端，统计他们的设备独立像素。 在这里，25学堂也跟大家分享一个罗列了当前最流行的手机的所有尺寸大小规范： http:/

2.1 介绍产品相关信息 你选择的产品是？ 　　微信 为什么选择该产品作为分析？ 　　微信是一款全方位的手机通讯应用，帮助我们轻松连接全球好友。微信可以通过SMS/MMS网络发送短信、进行视频聊天、与好友一起玩游戏，以及分享自己的生活到朋友圈，让我们感受耳目一新的移动生活方式。 　　截止到2016年第二季度，微信已经覆盖中国 94% 以上的智能手机，月活跃用户达到 8.06亿，用户覆盖 200 多个国家、超过 20 种语言。此外，各品牌的微信公众账号总数已经超过 800 万个，移动应用对接数量超过 85000 个，广告收入增至36.79亿人民币，微信支付用户则达到了 4 亿左右。 　　到了现在，作为一款月活用户已经高达9.63亿的聊天工具，微信以其强大的影响及覆盖力，越来越多方便快捷的功能，占据着我们的生活，让我这个手机就是全世界，不发朋友圈就会死的玩家，选择进行深入调查分析。除此之外，我也一直存在着一些疑惑，比如为何越来越多历经了QQ和微信两大聊天工具繁荣的90后，最终选择了微信；朋友仅显示最近三天朋友圈功能的推广，反映了大众什么样的心理等。 该产品是怎么诞生的（在什么样的背景下）？ 　　2013 年 12 月 4 日，我国工信部正式发放 4G 牌照，从此拉开 4G 高速网络的大幕。 4G 网络的启用和技术的逐步成熟 ，必将大幅度提升手机的上网速度

在做移动端的需求有时候需要用到对滚动结束进行事件绑定以完成一定的功能，先来了解一下现状。 在移动端，正常的一次swipe动作会依照以下顺序触发事件： touchstart -> touchmove -> touchend ->scroll 一、IPAD 通过以下代码进行测试： 　　　　 var timestart =0; var timer = null; function log(){ console.log("---------settimeout" + (new Date()-timestart) ); } $(window).on('scroll',function(){ console.log('-----scrollend:' + (new Date() - timestart) +'ms'); timestart = new Date(); }); $(window).on('touchstart',function(){ console.log('touchstart'); }); $(window).on('touchmove',function(){ console.log('touchmove'); }); $(window).on('touchend',function(){ timestart = new Date(); console.log(

在做移动端自动化的过程中，难免有时需要查看移动端发送给服务器的请求和响应参数，在PC端我们可以通过F12开发者工具查看接口的请求详情，那移动端需要如何查看呢？今天我们就来聊聊这个话题。 工具——Fiddler Fiddler是一个http协议调试代理工具，它能够记录并检查所有你的电脑和互联网之间的http通讯，设置断点，查看所有的“进出”Fiddler的数据。 注意：Fiddler 是以代理web服务器的形式工作的，它使用代理地址:127.0.0.1，端口:8888。当Fiddler退出的时候它会自动注销，这样就不会影响别的程序。但要是Fiddler非正常退出，因为Fiddler没有自动注销，会造成请求超时无法访问。解决的办法是重新启动下Fiddler。 下载地址 官网下载地址： https://www.telerik.com/download/fiddler 需要你填写邮箱、地址等信息，勾选接受相关条款后点击下载按钮进行下载 安装 安装其实没啥特别说明的，选择你需要安装的目录后，一路next就行了 配置 要想拦截移动端设备的请求，需要做以下几个操作： 首先确保打开Fiddler的电脑和移动端设备是处于同一局域网内，即连着同一wifi 查看本机IP地址，可以在cmd命令行中输入ipconfig或是直接在Fiddler的界面右上角，鼠标悬停在online上，就能显示本机IP

1.HTML5移动端图片左右切换动画 今天要给大家分享一款很不错的图片左右切换焦点图动画，并且支持移动端触摸滑动。功能上，这款HTML5图片播放器支持鼠标滑动、手机端触摸滑动以及自动播放。外观上，这款HTML5图片切换动画的两侧有淡化处理，因此更显立体效果。 在线演示 源码下载 2.可爱的CSS3圆盘时钟动画 之前我们分享过一些基于CSS3和jQuery的圆盘时钟，比如纯CSS3实现圆盘时钟动画和HTML5/CSS3时尚的圆盘时钟动画。今天要分享的也是一款可爱的CSS3圆盘时钟动画，时钟背景是乳白色的，显得非常干净，另外，时钟也可以和你本地的时候保持同步。 在线演示 源码下载 3.CSS3 登录表单 个性化登录按钮 这是一款基于jQuery和CSS3的登录表单，登录表单的界面整体呈现扁平化风格，非常简洁和清新。当焦点在表单的输入字段上时，表单提示文字会出现一个小动画，同时这款CSS3登录表单的最大特点是其个性化的登录按钮，鼠标滑过也有不错的效果。 在线演示 源码下载 4.自适应jQuery焦点图插件 支持移动端触摸 今天我们要来分享一款很灵活的jQuery焦点图插件，和以前介绍的jQuery焦点图动画类似，它也提供左右切换按钮，同时在图片上悬浮自定义图片切换按钮。切换动画包括上下左右切入动画以及淡入淡出动画。这款jQuery焦点图最大的特点是支持移动端触摸功能。 在线演示 源码下载

meta标签到底做了什么事情 做过移动端适配的小伙伴一定有遇到过这行代码： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 但是，很多小伙伴只是感性的认识：噢，我加了这行代码，然后页面的宽度就会跟我的设备宽度一致。然而，这种理解是很片面的。那么，这句话的本质到底是什么呢？ 不急，我们先往下面看，这里先留个悬念。 几个专有名词和单位 这里，我们先来辨析一下在适配的时候经常会遇到的一些名词、数值单位。 首先，先来看一下 物理像素 。 以iphone6为例，可知道： 分辨率 ：1334pt x 750pt 指的是屏幕上垂直有1334个物理像素，水平有750个物理像素。 屏幕尺寸 ：4.7in 注意英寸是长度单位，不是面积单位。4.7英寸指的是屏幕对角线的长度，1英寸等于2.54cm。 屏幕像素密度 ：326ppi 指的是每英寸屏幕所拥有的像素数，在显示器中，dpi=ppi。dpi强调的是每英寸多少点。同时， 屏幕像素密度 = 分辨率 / 屏幕尺寸 接着，我们来看一下其他的单位。 设备独立像素 ：设备独立像素，不同于设备像素（物理像素），它是虚拟化的。比如说css像素，我们常说的10px其实指的就是它。需要注意的是， 物理像素 开发者是无法获取的，它是自然存在的一种东西，该是多少就是多少。