移动互联网终端

移动端网页项目总结

。_饼干妹妹 提交于 2019-12-21 21:01:58
通过此次项目,对于移动端的网页制作有了初步的了解,同时也对 css 的布局更为熟练,对响应式布局也有了初步的认识。 在移动端的网页制作中,由于手机的尺寸和分辨率与 pc 端有较大的出入,故而为了让所制作的网页能够很好地匹配手机,必须在网页的头部设置 viewport 的值: <meta name="viewport" content="width=750,maximum-scale=1,user-scalable=no" /> 上面所设的值表示移动端中,移动设备为宽度为 750 ,最大比例为 1 。 设置了上面的值后,我们在制作移动端网页时便可以将所测量的值直接赋予网页的各个模块中。 通常,一个项目中各个网页中会有许多相同或相似的结构,这时,我们可以将这样的网页结构的样式写在公共的样式文件中,在需要时直接在网页中添加相同的类名,这样做可以有效地提高工作效率。 在响应式布局中,我们可以为文档设置字体的大小,如 <html font-size="100px"> 。这样一来,在设置其它的模块大小时,我们只需要将其单位写为 rem ,其值为文档字体大小的相对值。如: div{width:2rem;height:2rem;} 将 div 的宽度与高度都设置为了 200px 。 来源: https://www.cnblogs.com/wuxiaoshang/p/5816798.html

第06组 Beta冲刺(1/5)

徘徊边缘 提交于 2019-12-21 14:23:15
队名: 拾光组 组长博客链接 作业博客链接 团队项目情况 燃尽图(组内共享) 组长:宋奕 过去两天完成了哪些任务 准备beta冲刺的内容和分工 修改了后端的一些bug GitHub签入记录 接下来的计划 维护后端代码,跟进组员完成进度,学习后端架构,学习深入python,解决匿名拨打电话问题,实现套牌多结果处理,准备beta版本的答辩 还剩下哪些任务 维护后端代码,跟进组员完成进度,学习后端架构,学习深入python,解决匿名拨打电话问题,实现套牌多结果处理,准备beta版本的答辩 燃尽图组内共享 遇到了哪些困难 维护数据库结构 有哪些收获和疑问 体会到打代码的快乐 如何提高后端数据的安全性? 组员1:杨晋南 过去两天完成了哪些任务 完善了移动端Android部分界面间逻辑代码 github签入记录 接下来的计划 学习Android应用开发进阶,精进移动端Android界面的实现,拍照功能的完善,准备beta版本的答辩 还剩下哪些任务 学习Android应用开发进阶,精进移动端Android界面的实现,拍照功能的完善,准备beta版本的答辩 燃尽图组内共享 遇到了哪些困难 按钮触发的灵活性问题 有哪些收获和疑问 学习到了有关界面逻辑代码的注意点 如何更好地暗示组长请客? 组员2:刘晓翔 过去两天完成了哪些任务 完善了移动端iOS部分界面间逻辑代码 GitHub签入记录 接下来的计划

移动端H5-在Vue项目中使用fastclick,解决300ms左右的延迟

此生再无相见时 提交于 2019-12-20 17:28:03
移动端点击延迟事件,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟,解决方式: 一、安装 npm install fastclick -S 二、用法 安装完以后,可以在在main.js中全局引入,并绑定到body,全局生效。或者在单页面引入,只针对当前页面生效 //引入 import FastClick from 'fastclick' //初始化FastClick实例。在页面的DOM文档加载完成后 FastClick.attach(document.body) 三.使用过程中存在的bug: 当使用FastClick 时,input框在ios上点击输入调取手机自带输入键盘不灵敏,有时候甚至点不出来。而安卓上完全没问题。这个原因是因为FastClick的点击穿透。解决方法: // 添加Fastclick移除移动端点击延迟 import FastClick from 'fastclick' //FastClick的ios点击穿透解决方案 FastClick.prototype.focus = function (targetElement) { let length; if (targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type

使用adb命令 PC和移动端互传数据

帅比萌擦擦* 提交于 2019-12-20 00:24:39
PC向移动端传输数据 前面是本地路径 后面是移动端路径;可以理解为 推送本地文件到移动端生成该文件 adb push v1.0.25/commlinkclient.apk /storage/emulated/0/CommlinkClient/apks/commlinkclient.apk 移动端向PC传输数据 与上面相反;拉取远程文件到本地 adb pull /storage/emulated/0/CommlinkClient/logs/2019年12月19日/ ./logs 总结 1.拉取和推送 路径相反 2.可以传输文件夹也可以传输具体某个文件 来源: CSDN 作者: 输赢成败 链接: https://blog.csdn.net/weixin_42258548/article/details/103611806

js判断移动端还是pc端

て烟熏妆下的殇ゞ 提交于 2019-12-19 22:03:13
js判断移动端还是pc端: 分别在移动和PC端的头部head文件中写 移动端: < script language = "JavaScript" > if ( ( ! navigator . userAgent . match ( /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i ) ) ) { window . location . href = "../PC/index.html" ; } < / script > PC端: < script language = "JavaScript" > if ( ( ! navigator . userAgent . match ( /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i ) ) ) { window . location . href = "..

Rem自适应js---flexible.min.js

我怕爱的太早我们不能终老 提交于 2019-12-19 01:20:59
网上看到很多移动端适配的各种方法,由于原来工作中对rem的疏忽,所以决定重新学习rem~ 由于移动端特殊性,本文讲的是如何使用 rem 实现 自适应 ,或叫 rem 响应式 布局,通过使用一个脚本就可以rem 自适应 ,不用再为各种设备宽度不同而烦恼如何实现自适应的问题。 rem 是相对于根元素 < html > ,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。1rem=16px(浏览器html的像素,可以设定这个基准值),假如浏览器的html设为64px,则下面的元素则 1rem=64px来运算 。 阿里团队开源的一个库。使用 flexible.js 轻松搞定各种不同的移动端设备兼容自适应问题。 在这里找到了一个精简版的flexible.min.js,可以适配所有的移动端: 代码如下: //designWidth:设计稿的实际宽度值,需要根据实际设置 //maxWidth:制作稿的最大宽度值,需要根据实际设置 //这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作稿最大宽度,例如设计稿为750,最大宽度为750,则为(750,750) ;(function(designWidth, maxWidth) { var doc = document, win = window, docEl = doc.documentElement,

如何在移动端不加载不必要的js和动画等

被刻印的时光 ゝ 提交于 2019-12-18 15:49:47
网页特效越来越多,如上期分享的蜂窝特效就是直接引用了大神们的JS,在PC端运行还不错,炫酷,但似乎对移动端就不那么友好了,必竟对于移动端来说: 1、硬件情况并比不上PC端(暂时),运行特效js需要手机GPU很好,但也会发烫 2、屏幕不大、特效太多影响美观,其实由于自适应的原因,特效并没有一直在,所以在白白浪费资源。 所以对于引用的一些js来说,如蜂窝特效: <script src="canvas-nest.min.js" type="text/javascript"></script> 这样的代码肯定在web和wap端都会加载的,那如何在wap不加载呢?: <script> if (screen && screen.width >768 ) { document.write('<script src="canvas-nest.min.js" type="text/javascript"><\/script>'); } </script> 改成以上形式,即在屏幕宽大于768的时候则加载js,如果低于,那么不加载。 PS: 同样你也可以用其它的判断,比如说判断手机本身android或iphone等等都可以。 再同样你也可以用它去减少许多不需要在移动端运行的动画、事件等等。 来源: CSDN 作者: still 链接: https://blog.csdn.net/shuanghusun

从零基础到精通的前端学习路线

痴心易碎 提交于 2019-12-18 11:41:57
随着互联网的深入发展,前端开发工程师一跃成为市场上非常抢手的人才。很多同学,包括以前做UI的、Java的、或者对于IT完全零基础的同学都想学习前端。下图是网上流传甚广的一张前端学习思维导图,很多初学者表示看到这些密密麻麻的知识点就已经晕了。确实,前端是一门涵盖面很广的学科。但是想学前端的你也不用慌张,内容虽多但有迹可循,只要循序渐进就不怕学不好前端! 那么前端开发到底需要学什么?应该怎么学?接下来小编教你如何从零基础学习前端。 一、前端开发入门 在入门阶段,你首先要学会最基本的技能:根据UI的设计稿,实现HTML的静态页面制作。这就要求你得掌握HTML、CSS页面布局排版、样式美化等技能。 在这个阶段你需要学习: 1、HTML+CSS基础 掌握HTML的标签使用、排版技巧、CSS的布局定位、样式美化、浏览器兼容性。 2、JavaScript基础 掌握JS的基本语法、条件、语句、循环等,学会常用算法,增强逻辑性。 3、常用的前端工具 比如Webstrom、Sublime、Dreamweaver等。掌握其快捷键设置等技巧,可快速提高开发调试效率。 这个阶段的学习难度相对不高,学完这些之后,我们已经能完成静态页面的制作。当然,这只是入门,如果你想用这些技能找工作的话还是比较困难的。 二、前端开发初级 在接下来的这一个阶段,我们的目标是达到前端开发行业的基本要求

移动端开发touch和click的区别

偶尔善良 提交于 2019-12-18 09:48:17
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 1、click事件主要存在300毫秒的延迟,且不会存在穿透事件 300ms的由来: 这要追溯至 2007 年初。苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点的问题。 这当中最出名的,当属双击缩放(double tap to zoom),这也是会有上述 300 毫秒延迟的主要原因。 双击缩放,顾名思义,即用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 那么这和 300 毫秒延迟有什么联系呢? 假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作,当用户一次点击屏幕之后,浏览器并不能立刻判断用户是确实要打开这个链接,还是想要进行双击操作。因此,iOS Safari 就等待 300 毫秒,以判断用户是否再次点击了屏幕。 鉴于iPhone的成功,其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定,包括双击缩放,几乎现在所有的移动端浏览器都有这个功能。之前人们刚刚接触移动端的页面,在欣喜的时候往往不会care这个300ms的延时问题,可是如今touch端界面如雨后春笋

简单VR照片 使用陀螺仪、姿态角(Roll、Pitch、Yaw )、四元数

拈花ヽ惹草 提交于 2019-12-18 09:04:04
最近在做一个类似VR照片的demo,跟全景图片也很像,只是VR照片与全景720度显示,我只做了180度。但我发现他们实现的原理有一丝相似,希望可以给一些想入行AR、VR的朋友一些提示吧。 要想根据用户摇晃手机的行为轨迹展示相应的场景,那必须要使用移动端的陀螺仪、加速器等传感器来做相应的协调。现在的移动端已经提供了很多传感器,你可以根据自己的需要获取相应的数据。 刚开始的时候,我使用传感器提供的姿态角,也称为欧拉角:pitch yaw roll 来显示。这种 姿态角/欧拉角 比较常用在航空上,无人机技术应该也使用到了这个技术点。我用飞机的模型来展示一下这三个角,就一目了然了(不同作者使用不同的坐标系,使用哪种坐标系,个人而定。): 图一 姿态角/欧拉角 在数学上理解起来会有点抽象,我也是稍理解一点。在维基百科上,欧拉角定义为:用来描述刚体在三维欧几里得空间的取向,对于任何参考系,一个刚体的取向,是依照顺序,从这参考系,做三个欧拉角的旋转而设定的。有兴趣了解得深入一点,可以参考(需翻墙): https://zh.wikipedia.org/wiki/%E6%AC%A7%E6%8B%89%E8%A7%92 我们也可以简单理解这三个角代表什么意思: 1、俯仰角θ(pitch):围绕Y轴旋转的。 图二 2、偏航角ψ(yaw):围绕Z轴旋转的角度。 图三 3、滚转角Φ(roll)