移动互联网终端

随着人工智能的逐步成熟，互联网技术的渐渐迭变，图形验证码的安全性也愈发岌岌可危。那么，如今的机器是如何识别图形验证码的呢？ 图形验证码（或是拖拽、点触类验证码）的初衷在于人机验证，最初，其将利用机器进行违规操作的人挡在门外，从而保障互联网的安全。然而，科技发展到如今，这个可供识别人机的验证方式仿佛已难以保障其安全性。小编今日就带着看官们了解一下，机器识别图形验证码究竟有多神。 据网络上的机器破解图形验证码原理中介绍，机器识别一个普通图形验证码仅需4步，还有根据概率、机器学习等大量的方法来完成的。类似于此的破解方式只要上网搜索便可获取不少，已经不是什么技术难题，更不是机密。即使不少网站及APP更新了自己的验证码，增加了其难度，但以目前人工智能高速发展的水平来看，智商已经赶超人类的机器们通过快速的学习，也能够轻易的识别这些图形验证码。 综上，可以看到图形验证码的未来，早已被高速进步的人工智能所影响。未来，随着人工智能的普及，图形验证码的安全性也将愈发脆而不坚。 除此以外，影响着图形验证码发展的还有其人机验证的初衷。 据相关数据显示，PC端和移动端的比例大约是2比8，2015年淘宝每天的IP点击量约4200万，天猫每天的IP点击量约2700万，可知IP比例占到64%，2016年此数据有所降低，淘宝每天的IP点击量约3600万，而天猫每天的IP点击量已经降到约1400万

队名: 拾光组 组长博客链接 作业博客链接 团队项目情况 燃尽图(组内共享) 组长：宋奕 过去两天完成了哪些任务 继续维护后端代码 学习深入python 研究匿名拨打电话问题、套牌多结果处理问题 GitHub签入记录 接下来的计划 维护后端代码，跟进组员完成进度，学习后端架构，学习深入python，解决匿名拨打电话问题，实现套牌多结果处理，准备beta版本的答辩 还剩下哪些任务 维护后端代码，跟进组员完成进度，学习后端架构，学习深入python，解决匿名拨打电话问题，实现套牌多结果处理，准备beta版本的答辩 燃尽图组内共享 遇到了哪些困难 天好冷，风好大，软工好难 有哪些收获和疑问 凭借对软工的热情战胜寒冷，克服困难 如何打代码的时候不冻手？ 组员1：杨晋南 过去两天完成了哪些任务 学习Android应用开发进阶 拍照功能完善 github签入记录 接下来的计划 学习Android应用开发进阶，准备beta版本的答辩 还剩下哪些任务 学习Android应用开发进阶，准备beta版本的答辩 燃尽图组内共享 遇到了哪些困难 困难地和寒冷作斗争 有哪些收获和疑问 了解云开发 如何打代码的时候不冻手？ 组员2：刘晓翔 过去两天完成了哪些任务 学习iOS进阶 完善移动端iOS界面存在的小问题 拍照功能的完善 GitHub签入记录 接下来的计划 学习iOS进阶

跨平台移动APP开发进阶(二)HTML5+、mui开发移动app教程 作者： sunhuaqiang1 前端开发APP，从HBuilder开始~ 序 通过 HTML5 开发移动App 时，会发现HTML5 很多能力不具备。为弥补HTML5 能力的不足，在W3C 中国的指导下成立了www.HTML5Plus.org组织，推出HTML5+规范。 HTML5+扩展了JavaScript 对象plus，使得js 可以调用各种浏览器无法实现或实现不佳的系统能力，设备能力如摄像头、陀螺仪、文件系统等，业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。 HBuilder 的手机原生能力调用分2 个层面： a) 跨手机平台的能力调用都在HTML5+ 规范里，比如二维码、语音输入，使用plus.barcode 和plus.speech。编写一次，可跨平台运行。 b) JS Bridge是另一项创新技术，通过js 可以直接调ios 和android 的原生API，这部分就不再跨平台，比如调ios game center，或在android 手机桌面创建快捷方式。 JSB 的用法是var obj = plus.android.import("android.content.Intent");将一个原生对象android.content.Intent 映射为js 对象obj，然后在js

2016.10.06 为什么百度、淘宝之类的大公司网页不使用响应式，而是独立开发一套手机页面？ 在手机上打开淘宝和百度的网址，发现地址前面都有个“ m ”,这是手机端的页面。 为什么这些大公司不把pc端页面做成响应式？这样不是可以节省点工作吗? 先给出结论：如果开发资源充裕，不应该考虑使用响应式设计来同时支持移动端和桌面端。 因为响应式最大的优点就是 开发快 ，打个比方，移动端和桌面端的开发时间分别是t，采用响应式来同时支持两者的网站可能只有1.2t. 那为什么开发资源充足的情况下，不应该采取响应式设计来同时支持移动端和桌面端？ 1.响应式设计带来大量冗余代码，在移动端充斥着Webkit内核的浏览器的时代，响应式设计的网站却不得不带有大量兼容旧IE的代码，移动端开发必须考虑在弱网情况下的渲染方式，而响应式设计带来的冗余代码无疑是一种累赘。 2.桌面端和移动端的屏幕大小和操作方式的差异决定了两者设计一定存在根本性的区别。《响应式Web》一书中提到，响应式设计应该以移动优先，在设计之初就可以以移动端网站为设计目标，然后再考虑如何在桌面端布局，你很难想象将一个功能和交互复杂的桌面端改成支持移动端访问的响应式设计究竟有多么复杂，而且将桌面端网站的大量内容堆砌在手机页面上也是极其影响性能的事，可以想象页面的打开速度简直糟糕透了。 说了这么久的响应式设计的坏处

一、静态布局（static layout） 　　即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点 　　不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。 2、设计方法 　　 PC： 居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分； 　　 移动设备： 另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。 优点 ：这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。 缺点 ：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。当前，大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种完全兼容未来网页的制作方法，我们需要一些适应未知设备的方法。 二、流式布局（Liquid Layout） 　　流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。 　　网页中主要的划分区域的 尺寸使用百分数

做网页时，我们通常需要考虑到不同电脑屏幕尺寸，以及不同手机屏幕大小等问题，解决样式发生改变的情况，那么如何解决呢？现在主要是采用自适应来解决高度，宽度的，以及图片自适应问题，下面就PC端和移动端来总结一下，通常进行自适应高度和宽度，图片时，一般与页面的布局存在关系。 1、最小尺寸分辨率1024*768（传统17寸显示器），则可以采用940px、960px、或者常用的980px作为最小宽度 2、1024*768之后稍大的分辨率就是1280*768了，则可以采用1200px或者1220px作为稍大的网页宽度 3、支持css3、html5的高级浏览器可以利用CSS3 Media Queries让网页在不同分辨率下自动调节布局标签 4、不支持css3、html5的脑残浏览器特别是<=ie8系列则需要用js以及resize事件来控制html的布局标签宽度了 5、宽度自适应需要对每个显示模块进行不同宽度的计算，在做html布局时需要大量的计算与适配。 6、宽度自适应为不同宽度显示器写布局元素时常用的css 一：了解高度和宽度的基础 网页可见区域高宽为：document.body.clientHeight||document.body.clientWidth 网页正文的区域高宽为：document.body.scrollHeight||document.body.scrollWidth

做移动端的Web也有一段时间了，踩过的坑真心不少。 下面列出一些，移动端浏览器兼容性的Bug，供大家参考。 【UC浏览器】video标签脱离文档流 场景：<video>标签的父元素(祖辈元素)设置transform样式后，<video>标签会脱离文档流。 测试环境：UC浏览器 8.7/8.6 + Android 2.3/4.0 。 Demo：http://t.cn/zj3xiyu 解决方案：不使用transform属性。translate用top、margin等属性替代。 【UC浏览器】video标签总在最前 场景：<video>标签总是在最前（可以理解为video标签的z-index属性是Max）。 测试环境：UC浏览器 8.7/8.6 + Android 2.3/4.0 。 【UC浏览器】position:fixed 属性在UC浏览器的奇葩现象 场景：设置了position: fixed 的元素会遮挡z-index值更高的同辈元素。 在8.6的版本,这个情况直接出现。 在8.7之后的版本,当同辈元素的height大于713这个「神奇」的数值时,才会被遮挡。 测试环境：UC浏览器 8.8_beta/8.7/8.6 + Android 2.3/4.0 。 Demo：http://t.cn/zYLTSg6 【QQ手机浏览器】不支持HttpOnly 场景

1. IOS移动端click事件300ms的延迟响应 移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的, 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。 双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接<a href="#"></a>，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒

什么是浏览器的兼容 浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。所以在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。 1 块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大 解决办法 ： 在float的标签样式控制中加入 display:inline;将其转化为行内属性 2 设置较小高度标签（一般小于10px），在ie6，ie7，遨游中高度超出自己设置高度 解决办法 ： 给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。 3 行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，ie6间距bug 解决办法 在display:block;后面加入display:inline;display:table; 4 图片默认有间距 解决办法 使用float为图片布局 5 标签最低高度设置min-height不兼容 决绝办法 如果我们要设置一个标签的最小高度200px，需要进行的设置为： {min-height:200px; height:auto !important; height:200px; overflow:visible;} 6

随着手机的普及，移动端的开发也成了一个重要的方向，但由于设备的不统一会造成一些兼容性问题， 1、安卓浏览器看背景图片，有些设备会模糊。 用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？ 经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960*640分辨率，在网页里只显示了480*320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也有3的。 想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。例如一个div的宽高是100*100，背景图必须得200*200，然后background-size:contain;，这样显示出来的图片就比较清晰了。 代码可以如下： background:url(../images/icon/all.png) no-repeat center center; -webkit-background-size:50px 50px; background-size: 50px 50px;display:inline-block; width:100%; height:50px; 或者指定 background-size:contain;都可以，大家试试！ 2、图片加载