移动互联网终端

相关知识点 移动端、 适配（兼容）、 ios点击事件300ms延迟、 点击穿透、 定位失效...... 问题&解决方案 手机浏览器独有的三个事件？ onTouchmove，ontouchend，ontouchstart，ontouchcancel 为什么要用Zepto? jquery适用于PC端桌面环境，桌面环境更加复杂，jquery需要考虑的因素非常多，尤其表现在兼容性上面，相对于PC端，移动端的发杂都远不及PC端,手机上的带宽永远比不上pc端。pc端下载jquery到本地只需要1~3秒（90+K），但是移动端就慢了很多，2G网络下你会看到一大片空白网页在加载，相信用户第二次就没打开的欲望了。zepto解决了这个问题，只有不到10K的大小，2G网络环境下也毫无压力，表现不逊色于jquery。所以移动端开发首选框架，个人推荐zepto.js。 IOS移动端click事件300ms的延迟响应 移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的, 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页

目录 一 概述 二 原理 移动端控件 移动端API 三 写在最后 一. 概述 Smobiler实现了.net服务端开发,ios和android客户端直接运行显示,无需学习Objective-C或Java,一次开发搞定iOS和Android两大平台. 框架底层的通讯使用的是C++的，保证了通讯的安全性,并实现和动态部署的功能,在app快速迭代的时代,通过Smobiler开发的App,只需要修改服务端,即可实现客户端的实时更新,不需要重新打包发版. 二. 原理 接下来,将从原理上谈谈Smobiler如何实现此功能的. 并分别针对iOS和Android讲解. 控件 Designer上提供了很多基础控件,像Panel,Button,Image,Lable,TextBox,这些基础UI组件和原生应用完全一致,实际上,在客户端,这些控件就是原生控件开发而成的,通过服务端控制其属性,传递给客户端配置. API Smobiler客户端使用原生开发方式,集成了手机硬件的大部分功能,服务端只需要通过简单的API调用即可实现对手机硬件功能的使用.而第三方插件的方式,也给有能力的用户开发自己需要的原生功能带来了可能. 移动端控件 在做iOS和Android的跨平台功能中,控件都是原生的，通过加密的自有协议Render,创建丰富的原生UI库,让Smobiler用户感受和原生应用一致的用户体验.

/*--> */ /*--> */ 目录 概述 演示一：零改造实施单点登录 演示二： 单点注销 演示三：集成AD认证 演示四：客户端单点登录 演示五：移动端单点登录 单点登录SSO概述 本系列将由浅入深的，带大家掌握最新单点登录SSO方案选型，以及架构开发实战。系列将结合示例、源码以及演示视频，让大家能够直观、深入学习。 文末附5个满足不同单点登录场景的gif动画演示。本系列后继文章会深入它们的实现方式以及适用场景，大家也可以先观看揣摩其实现。 零改造实施单点登录 单点注销 集成AD认证 客户端单点登录 移动端单点登录 单点登录即Single Sign On（SSO）。它是大型政府OA、企事业单位OA的标配解决方案。它概言之就是在多个Web、桌面或移动应用系统中，用户只需要登录一次，就可以访问所有的应用系统。 从业十多年，为政府、电信、跨国公司顾问和实施的单点登录解决方案无数，深谙其痛点与关键。 和很多人直观猜测相反，单点登录方案的定制性很强。很多企业的单点登录，实施是有问题的。尤其是被一些软件产品的销售人员牵着走的企业，它的单点登录方案实施，从产品方案选型起就存在根本性问题。这些方案常常要求大量现有业务系统的改造（基于统一身份认证服务，采用OpenId，OAuth，SAML等技术创建和传递认证凭据），或者只是体验较差的类似浏览器自动填充账号密码的功能（如Oracle的ESSO）

关于IOS行业编程的统一规范，我们在提升编码自身简洁和性能方便要注意，也是一个优秀的程序员必备的素质，鉴于之前交接的项目，希望我们外包的程序在这方便按着规范的要求。 1、 首先是内存管理，有new 、alloc的对象如果不是ARC管理的必须有释放，dealloc写在@implementation下面，init放到其下面，方便查阅，需要autorelease的也要写上，比如tableView创建cell的时候，发现i摩比移动端有忘记写autorealse的现象。 2、 通知中心注册需要在dealloc中对应remove掉对象，一个对象的delegate对象要在dealloc中及时赋nil。 3、 大量的创建对象和销毁对象需要建立一个自动释放池，方便局部内存管理。 4、 关于魔数，我们不要硬编码，这样不知道这个数字代表什么，我们最好是写成枚举，也知代表什么，方便管理的同时也不会引起一些冲突， 5、 关于网络这块，我想我们网络需要再一两个文件里统一管理，不管是有系统的AFNetwork还是常用的第三方的ASIHTTPRequest还是最新的NKNetwork我们都需要统一管理，方便接口的查看，两外在请求的时候我们要做好管理机制，请求需要我们做好中断操作等各种网络的优化，咱们移动端有卡的现象。 6、 关于数据的统一管理，数据管理是一个很重要的模块直接关系到代码的简洁性，和应用的体验性

3 月，跳不动了？>>> 参考文档：Safari Web Content Guide 首先要弄清楚 三个视口 的概念，分别是：视觉视口、布局视口、理想视口 ##1.视觉视口 就是指用户的可见视野。 ##2.布局视口 或许你不知道'布局视口'这个概念，但是在移动端页面中，你肯定用过下面这行代码。这行代码的作用就是设置布局视口。 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 布局视口主要是针对移动端而言，对于pc端而言，布局视口和视觉视口是一个概念。为什么移动端会分开这两个概念呢？ 移动端的浏览器在显示一个没有针对移动端特殊设计的pc端网页时，如果布局视口还是采用视觉视口，那么空间严重不够。 下图是将一个宽度为980px的网页显示在布局视口分别为320px和980px的浏览器中。在布局视口为980px时，网页刚好显示完整，而在布局视口为320px时(比如在iPhone5下，布局视口采用视觉视口的大小)，只有灰色的方块部分能够显示出来，其他部分均需要用户移动网页才能看见。真是糟糕的体验。 会将网页缩小，方便移动端用户查看。这就是通过改变布局视口实现的，大多数浏览器会把这个视口设置为980px。你可以通过chrome的模拟器查看。

3 月，跳不动了？>>> 最近因为一个登录注册的问题和公司的项目经理争论开来，项目经理觉得需要在注册的时候需要进行密码的二次确认，我的观点则是在移动端不需要二次确认。我的理由很简单，大致如下： 1. 用户在手机上输入的成本是很高的，每增加一步操作步骤，都会降低用户的注册成功率； 2. 输错密码的用户只占少数，即使按照2/8原则来粗略估算，也只有约20%的用户会输错，不需要为了这20%的用户来让100%的注册用户都多此一步； 二次验证没有必要，假定用户密码输入密码错误，通过忘记密码功能，一条验证码重置密码即可。 由这个讨论，引发了我关于移动端的输入的一些思考，于是便有了本文。本文主要包括两部分，分别是PC互联网与移动互联网的不同与移动端的输入。 一. PC互联网与移动互联网的不同 随着智能手机浪潮的爆发，以及3G、4G和Wifi技术的普及，使得移动互联网早已赶上并超越了PC，真正的实现了随时随地的上网。虽然说移动互联网是互联网的延伸，但是移动互联网和PC互联网还是有些区别的，不能把PC互联网上的一些产品直接移植到移动互联网上。 下面简单谈下自己思考得到的一些不同，抛砖引玉。 1、终端设备不同 PC互联网的终端设备主要是电脑，而移动互联网的终端设备主要是智能手机、平板电脑和便携带设备。最典型的不同就是PC互联网的显示屏幕较大，能够展示更多的信息，而在移动互联网的屏幕上

移动端的点击事件与Sticky Hover问题 v1.0 作者：ZBW 目录 移动端的点击事件与Sticky Hover问题 TL;DR 前言 问题描述 背景 实现方式 问题 关于移动端浏览器的点击事件 初次发现问题后各种解决尝试：从点击事件本身下手 cursor: pointer 区分设备分别使用click和touchend 问题的根源：CSS中:hover伪类在移动端的表现问题 解决办法 TL;DR 解决办法是：在:hover伪类外使用@media区分设备，在移动设备上使hover效果不生效。 @media (hover: hover) { .desexp-text:hover { opacity:1; } } 这一方法的缺点是问题在带有触控的PC上仍可能存在，但对于大多移动设备来说足以应付了。 前言 笔者起初认为该问题是JS的点击事件绑定有误导致的，但之后却发现问题出在CSS上。因此本文除了解决问题外，也会介绍以下笔者的踩坑历程，顺带介绍一下移动端点击事件的不同。 问题描述 背景 在Beta阶段，团队想要在项目中实现设计性实验复习的页面。该页面的主要使用方式是团队预先在整理好的复习资料中挖一些空，然后用户通过交互来显示/隐藏答案。计划的交互方式是： 鼠标放在空上，答案显示出来。鼠标移开答案消失 鼠标点一下空，答案显示，移开鼠标也不会消失。再次点击将恢复隐藏的状态。

软件案例分析 评测软件：CSDN APP 环境：iOS10.3.2 软件版本：v4.1.7 第一部分 调研，评测 1.体验 之前一直是用的是网页版，这次尝试了移动版，核心功能和网页版区别不大，虽然用手机编辑博客有点不舒服（可以看出已经很尽力优化体验了），但读博客还是很舒服的。 2.Bug 虽然整体功能不错，但还是有一些影响体验的小Bug： （顺便吐槽下博客园插入竖版图片咋这么大） 夜间模式不能做到全覆盖 打开夜间模式后，多数功能都能调整主题颜色至深灰色，但有些功能，一些是由于背景是由图片构成，无法自动替换（如“我的-任务中心”），还有一些是压根和白天无差（如“我的-付费专栏”），要是在晚上打开的话，是真的会被亮到的。 功能文不对题 ”我的-付费专栏“这一功能，打开后却显示的是个人资料，里面的功能也和个人资料里的功能基本一致，而且页面比例比较糟糕，有些意义不明，令人迷惑。 “添加关注”没有查找用户功能 在“我的”左上角有一个添加用户功能，但都是系统随机推荐的用户，并没有基本的根据昵称或是ID查找用户的功能，可以说是硬伤。 3.满意的地方 在“写博客”功能中，能够做到完美支持markdown，而且有一些快捷的编辑按钮，以及markdown基本语法的提示浮窗，整体流畅度也很好，非常令人满意（相比较，其他的移动端博客或是markdown编辑工具要么就是很卡，要么就是编辑吃力）。 4.总结

学习笔记@逆战班 移动端的布局主要分为四类，分别是流式布局，rem布局，响应式布局和弹性布局。四种布局都能很好的适应手机屏幕分辨率。 1 、流式布局：通过设置viewport可视窗口： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 布局窗口等于可视窗口。这样的布局方式，就是移动web 开发使用的常用布局方式。这样的布局可以适配移动端不同的分辨率设备。流式布局优点是大屏幕下能显示更多内容，充分利用可视空间，使用户能在大分辨率的屏幕下获取更多信息。但是在相对较宽的比例下会有些不协调，屏幕显示的内容可能会不对称。 2、 rem布局 首先，1rem等于html标签的font-size值，rem布局就是通过在不同分辨率下html的font-size值的调节，适配不同的设备进行等比缩放。这时候又引进了一个新的单位“VW”，通过VW、rem、html的font-size值三个单位的转换，达到rem布局。屏幕分成100等份。1%等于1vw，根据iphone6、7、8下屏幕分辨率是375px，可得1vw == 3.75px，100px == 26.666667vw，所以设置html根元素的font-size值为26.666667vw，在iphone6、7、8下同样的100px等于100px，iphone6

视口viewport 1、在桌面端的浏览器的宽度有肯能是很大的，如果设置了一个很大的值，那么在移动端中的浏览器显示的时候会有横向移动的拖拽条，为了避免出现这样的横向拖拽条，我们每次都要页面的宽度就是移动设备浏览器的宽度 2、移动设备的浏览器（或App中的webview）好比是相框，viewport就是相框中的画，如果画与相框一样大是不是很完美？ 3、快捷键：meta：vp + tab，使用了meta可以将视口调整到与设备大小一样 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 3、参数解释 name：声明属性是viewport属性 content：属性具体设置的值 width：宽度，一般是设备宽度device-width height：高度，一般不设置让其自动撑大 initial-scale：视口默认的缩放比例 一般默认设置的是1.0 user-scalable：设置是否支持缩放 一般设置的是 no、false、0 maximum-scale：最大的所放值 1.0 minimum-scale：最小的所放值 1.0 移动端样式 1、点击高亮效果：移动端默认点击会附带高亮效果，可以将此效果变成透明 a, button,