移动端页面开发过程中经常碰到的一些问题-马海祥博客
新型SEO思维就是从一个全新的层次上提升seo优化的水平，达到网络信息最佳化的展示效果！
> 移动端页面开发过程中经常碰到的一些问题
移动端页面开发过程中经常碰到的一些问题
时间：&&&文章来源：马海祥博客&&&访问次数：
对于前端开发者来说移动端存在着很多的挑战，移动端页面开发过程中会碰到各种各样千奇百怪的问题，那么今天我为大家分享移动端页面开发过程中的一些问题和解决问题的方法技巧。
移动端页面在不同设备、不同操作系统、不同运行环境下都可能造成各种各样的没有碰到过的的坑，相比曾经的IE6来说，现在的问题要多了很多。
现在的前端开发者基本都要同时着手PC端页面和手机页面的开发工作，就目前的状况来看，手机页面的兼容性要比PC端更为复杂（当然主要是只在android端，大家懂的），而且有些样式在PC端页面上可能没什么，但是一旦到了手机页面，那就有可能是&大坑&，下面是本人自己开发手机页面过程中总结的一些问题，在此借助马海祥博客的平台跟大家分享一下，避免以后再次去犯。
访问者对网站的第一印象就是网页的外观，一个好的网页外观能带给人绝妙的视觉效果，视觉效果好的页面背景，可以为网站起到锦上添花的作用，还可能让访问者对网站留下深刻的印象（具体可查看马海祥博客《》的相关介绍）。
A、页面高度渲染错误
在各移动端浏览器中经常会出现这种页面高度100%的渲染错误，页面低端和系统自带的导航条重合了，高度的不正确我们需要重置修正它，通过javascript代码重置掉：
document.documentElement.style.height = window.innerHeight + 'px';
B、叠加区高亮
在部分android机型中点击页面某一块区域可能会出现如图所示的黄色框秒闪，这是部分机型系统自身的默认定制样式，给该元素一个CSS样式重置掉：
-webkit-tap-highlight-color:rgba(0,0,0,0);
关于行为方面，我这里主要跟大家分享一下事件无法被触发和active效果不兼容的问题：
A、事件无法被触发
在部分android机型的微信环境中会出现事件无法触发、表单无法输入的情况，我们针对需要输入或者触发事件的元素设置样式：-webkit-transform: translate3d(0,0,0) ，不过新版本的微信已经直接修复了该问题。
B、:active 效果不兼容
在android 4.0版本以下CSS :active伪状态效果无法兼容，我们给该元素的touch系列的事件（touchstart/touchend/touchmove）绑定一个空匿名方法:
var element=document.getElementsById(&btnShare&);
element.addEventListener(&touchstart&,function(){},false);
在开发面向现代智能手机的移动Web应用的时候，无法避免一个事实，就是需要开发页面应用，对于不同的系统需求，页面应用的粒度会不同，可能是整个系统都使用一个页面装载，也可能是按模块分为独立页面装载，对此，我们也不妨来看一下在应用过程中经常遇到的一些问题及解决方法：
A、浏览器崩溃
var act = function(){
&window.removeEventListener('devicemotion',act);
window.addEventListener('devicemotion',act,false);
解绑函数写在了事件处理中导致小米手机中的微信崩溃，那么我们不要将解绑时间写在事件处理中即可。
B、预加载、自动播放无效
如上表所示，经过简单的测试发现预加载、自动播放的有效性受操作系统、浏览器（webview）、版本等的影响，苹果官方规定必须由用户手动触发才会载入音频，那么我们捕捉一次用户输入后，让音频加载实现预加载:
//play and pause it once
document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
C、无法同时播放多音频
在android设备中，播放后一音频会打断前一音频，而不会同步播放，这个是目前系统资深决定的，我们只有采取优雅降权的方法让android选择不一样风格的音频前后切换播放而不是同时播放，达到与预期接近的音频效果。
D、不支持局部滚动
在android 4.0版本以下在body(html)元素之外的元素 overflow:scroll 样式设置滚动条无效，这里有两种解决方案：
①、巧用布局直接设置样式滚动条在body(html)上，其他元素&错觉滚动&。
②、利用iscroll、自写js控制translate、scrollTop模拟。
4、系统/硬件
关于系统或硬件方面，我主要碰到以下几个问题，在此，也简单的跟大家描述一下，并提供一下解决方法：
A、怪异悬浮的表单
在部分android 机型中的输入框可能会出现如图怪异的多余的浮出表单，经过观察与测试发现只有input:password类型的输入框存在，那么我们只要使用input:text类型的输入框并通过样式-webkit-text-security:隐藏输入密码从而解决。
B、错误出现滚动条
在游戏内嵌页中出现了不应该出现的滚动条，而且内容并没有超出内容区宽度，经过测试overflow:hidden无效，通过一系列尝试使用古老的 &body scroll=&no&& 写法解决，多尝试一下不同的写法和属性会有不一样的惊喜哦！
C、链接打开系统浏览器
在游戏内webview的部分android机型中可能会出现点击链接调用系统浏览器的情况，这是一个非常不好的体验，那么我们尝试给这个元素添加 target=&_blank& 属性有可能解决，如果还不能解决那么需要修改IOS或android原生系统函数了。
D、Flex box 不兼容
在游戏内嵌webview中碰到Flex box布局不兼容的情况，图中所示下面部分的导航错位了，虽然之前有仔细查看过Flex box的兼容性，但是在游戏内嵌页中无法确定其调用的系统浏览器版本及兼容，导致错误，所以我们写完整历史版本的3种Flex box解决，那么我们思考在写页面过程中还是本着保守稳定的方式书写样式可以减少一些不必要的麻烦。
5、代码属性的问题
在移动端页面开发过程中，由于技术还不够完善和稳定，我们也经常会因为代码属性的问题导致页面出现很多千奇百怪的问题，这也是开发人员最为烦恼的问题，在此，马海祥也分享几个常见的问题：
（1）、overflow-x
这真的是一个大坑，一旦你在body或者html上用了这个属性，对不起，如果你的页面出现滚动条的话，那就会出现莫名其妙的bug，滑动页面的时候fix在顶部或者底部的会挡住，不知道有人遇到这样的情况没有，我是遇到了，坑死了。
解决办法：html跟body不要使用这个属性，如果不想让横向出现滚动，就用overflow:overflow-y:
（2）、calc()
这个本就是css3中的新方法，用起来其实是很爽的，无奈android不支持，大家最好别用，除非你不考虑android用户。
（3）、display:fix
这个是css3的新属性，用来做弹性布局的，ios上是十分OK的，然而android不支持，为了不被坑，别用。
（4）、-webkit-overflow-scrolling:touch
这个属性不是坑，他是用来让ios上的滚动条更加顺滑流畅的，亲测android上没有啥大的变化，但是ios有，不算坑，为了增强用户体验，大家可以用上，给出现滚动条的标签加上这个样式。
（5）、jquery中的html()方法
如果input的type为tel类型，然后你用html()方法取出某个值填入这个input，这个input在android手机上会显示诸如&&a href=&faketel:****&&&/a&&类似的字符窜。
解决办法就是用text()方法去取这个值然后填入这个input中，说白了还是html()跟text()方法的用法不一样，html()方法取的是html的内容，并非是纯文本，而text()方法取出的是纯文本，不会被浏览器解析，算是一个教训！
（6）、keyup和keydown在IOS设备上失效
如果你在IOS设备上用第三方输入法是无法用keyup事件来监听的，因为ios系统做了屏蔽机制，第三方输入法的事件系统是不管的，那么我们可以换种思路，去监听input的值变化事件，替换方案如下：
$('#input').bind('input propertychange', function() {
&&&&&&&&&&&&&&& alert(&....&)
&&&&&&&&&&& });
（7）、给body加position:relative
比如给移动页面做个弹幕的效果，在body里面会有个div一直滚动，从右向左，然后这个div是absolulte的，那一定要给body加relative，否则ios的手机会出现横向滚动条。
7、学会如何去解决问题
面对这么多坑，还有各种各样已经的和未知的坑，时间上也不可能一一讲完，更不可能都已经有解决方案，我们需要学会如何去解决这些问题。
解决坑首先自己需要有个强有力的执行力，通过不断去尝试来探索未知的问题，那么一般我们会通过哪些方式哪些步骤和技巧来尝试呢？
（1）、定位问题
首先我们需要定位问题，我们可以使用下列方法：
A、DOM隔离定位法
不断由大范围到小范围隔离出DOM，从而找出、触发问题的DOM元素。
B、样式、JS剔除法
不断剔除一些JS、CSS观察调试检查是否是由部分JS、CSS属性引起问题。
C、多运行环境测试法
在多环境中测试，排查是否是由于特定环境引起（具体可查看马海祥博客《》的相关介绍）。
D、PC与手机联合调试法
联合PC与手机进行定位，如：通过Mac远程调试iPhone/iPad。
（2）、解决问题的方式
我们解决问题可以尝试如下的方式：
* 尝试、转思维、绕解决
* 优雅降权、区分处理、沟通
* 搜索与提问&&
和以下的思维：
（3）、学会解决问题
在解决问题的过程中我们需要学会利用搜索和沟通资源解决问题：
A、google、百度
B、行业博客及社区
C、同事、朋友、QQ群、论坛等。
搜索引擎和行业博客及社区让你更容易更精确的快速搜索出问题相关的资料，同时、朋友QQ群、论坛等让你可以直接的跟人沟通出别人所遇到的问题及解决方案。
（4）、学会如何总结问题
在发现、解决问题后，更重要的是要学会如何总结问题：
A、总结记录问题产生条件、解决方法和解决过程。
B、尽可能分析原理、产生的条件，避免重蹈覆辙。
C、分享给更多的人。
无穷无尽的坑，走的人多了，总结分享的多了，坑也就越来越平了。
我在总结记录问题的同时，整理了一个移动端小贴士，记录问题与一些坑，虽然目前还不完善但是希望能分享给更多的人也希望更多的人能参与完善。
马海祥博客点评：
对于移动端网页，用户体验始终是大问题，交互式使用好的客户端可以在很多方面给用户带来不同的感觉和享受，因此，重视移动端的用户体验，就可以给客户端增加很多意想不到的功能，这样赋予这种软件其他的不同凡响，渐渐的就能让用户越积越多，这样才是交互功能一种好的体现。
本文为原创文章，如想转载，请注明原文网址摘自于/ydseo/1529.html，注明出处；否则，禁止转载；谢谢配合！
您可能还会对以下这些文章感兴趣！
清明节又叫踏青节，在仲春与暮春之交，也就是冬至后的第108天。是中国传统节日，也是最重要的祭祀节日之一……
最近百度跟360的搜索引擎之争，也使得更多人开始关注搜索引擎了，回想搜索引擎的快速发展也就是近15年发生……
网络实名制是个长期以来争议不断的话题。一方面，当人们面对越来越多的网上低俗与不良信息、黑客与木马、网……
相信做个seo的，或者自己已经是站长的，都或多或少的对自己负责……
最近一直听到圈里的朋友抱怨说，自己辛辛苦苦写的文章，发表的前……
最近，我明显发现访问马海祥seo博客的博友越来越多了，随之而来……
作为一名专业的SEO人员，我们很多的时候都在研究站点中有多少页……
很多做SEO的朋友都会问，是不是网站收录越多网站关键字排名越好……
由于此次整理的SEO作弊方法大全的内容比较多，也比较全面，导致……
本月热点文章CGAffineTransform 用于视图平移，放缩，旋转
CGAffineTransform
今天碰到了一个旋转放缩图片的一个demo，在看的过程中发现实现图片变化的那个方法特别简单。
一共只有三句话，下面就是这个方法
- (void)transformImageView
CGAffineTransform t = CGAffineTransformMakeScale(scale * previousScale,
scale * previousScale);
t = CGAffineTransformRotate(t, rotation + previousRotation);
self.imageView.transform =
来说一下这个方法的内容
1、首先创建了一个变换CGAffineTransform的一个对象 t (至于CGAffineTransform是什么咱们后面会详细说)，
这个变换是用来放缩的，里面的两个参数分别是对宽和高放大或缩小的倍数，这里是以相同比例放缩的。
2、第二行句是在放缩变化中再加入角度的变换。&
3、最后把变换赋给图片视图的一个属性transform。
就这么简单就实现了图片的旋转和放缩。
当然这里面最让人头大的就是CGAffineTransform，为此我特地翻了一下文档
CGAffineTransform
首先我查到的这个类其实就是一个变换，一个3*3矩阵的变换
CGAffineTransform类的方法
一、创建一个Transformations
1、CGAffineTransformMake //直接创建变换
CGAffineTransform CGAffineTransformMake (
CGFloat a,
CGFloat b,
CGFloat c,
CGFloat d,
CGFloat tx,
CGFloat ty );
可以看到参数比较多，其实它就是对应矩阵的前两列。据我估计，
可能一般不会直接用这个做变换。
2、CGAffineTransformMakeScale //创建一个给定比例放缩的变换
CGAffineTransform CGAffineTransformMakeScale (CGFloat sx, CGFloat sy);
可以看到这个参数就少多了，也比较好理解，假设是一个图片视图引用了这个变换，
那么图片的宽度就会变为 width*sx ，对应高度变为 hight * sy。
3、CGAffineTransformMakeRotation //创建一个旋转角度的变化
CGAffineTransform CGAffineTransformMakeRotation ( CGFloat angle);
在这里可以看到参数并不是一个角度，但是它是把参数作为一个弧度，然后把弧度再转换为角度来处理，
其结果就可能是将一个图片视图旋转了多少度。
4、CGAffineTransformMakeTranslation //创建一个平移的变化
CGAffineTransform CGAffineTransformMakeTranslation (CGFloat tx,CGFloat ty);
这个就比较好理解了，假设是一个视图，那么它的起始位置 x 会加上tx , y 会加上 ty
二、修改Transformations
1、CGAffineTransformTranslate //为一个变换再加上平移
CGAffineTransform CGAffineTransformTranslate (
CGAffineTransform t,
CGFloat tx,
CGFloat ty
简单来说就是在变化 t 上在加上平移
2、CGAffineTransformScale //为一个Transformation再加上缩放
CGAffineTransform CGAffineTransformScale (
CGAffineTransform t,
CGFloat sx,
CGFloat sy);
3、CGAffineTransformRotate //为一个Transformation再加上旋转
CGAffineTransform CGAffineTransformRotate (
CGAffineTransform t,
CGFloat angle
4、CGAffineTransformInvert //返回Transformation的反向
CGAffineTransform CGAffineTransformInvert (CGAffineTransform t);
5、CGAffineTransformConcat //合并两个Transformation
CGAffineTransform CGAffineTransformConcat (CGAffineTransform t1, CGAffineTransform t2);
返回一个由 t1 和 t2 合并而成的Transformation
三、运用Transformations
1、CGPointApplyAffineTransform //把变化应用到一个点上
CGPoint CGPointApplyAffineTransform (
CGPoint point,
CGAffineTransform t );
这个方法的返回值还是一个CGPoint，在我看来由于是一个点，
这个方法最终也只会影响这个点所在的位置。
2、CGSizeApplyAffineTransform //运用到一个区域中
CGSize CGSizeApplyAffineTransform (
CGSize size,
CGAffineTransform t);
只会改变区域的大小
3、CGRectApplyAffineTransform //运用到一个带原点的区间
CGRect CGRectApplyAffineTransform (
CGRect rect,
CGAffineTransform t);
这个我亲自试验过，三个属性 放缩、旋转和平移都有的一个Transformation ，
但处理之后只会改变这个区域原点的位置，和宽、高的大小，并不会旋转
四、检测一个Transformation
1、CGAffineTransformIsIdentity //检测一个Transformation是不是恒等变换，也就是说不变
bool CGAffineTransformIsIdentity ( CGAffineTransform t);//其结果返回一个BOOL值
2、CGAffineTransformEqualToTransform //检测两个Transformation是否相等。
bool CGAffineTransformEqualToTransform (
CGAffineTransform t1,
CGAffineTransform t2);Drag & Drop 改变了我对 iOS 的看法 | 闪新闻
当前位置&:& / /Drag & Drop 改变了我对 iOS 的看法
Drag & Drop 改变了我对 iOS 的看法
写 「」这篇关于 iPad Pro 的文章时，我是把 Drag & Drop 当作 Share Sheet 的替代品的，一种在 App 之间传递文件和复制粘贴的更方便的做法。而随着 iOS 11 的正式推出，大量 App 适配 iOS 11 并增加了对于 Drag & Drop 的支持。这几天时间仅是少数对 Drag & Drop 支持得比较好的 App 就完全改变了我对于 Drag & Drop 甚至 iOS 的看法。
我以为的 Drag & Drop
Mac 上拖拽功能大有年头。近年来比较 iPad Pro 和 Mac 时，Mac 上的拖拽功能常常被提出来。Mac 上我们用拖拽来处理文件，比如移动文件位置、把文件拖拽到 App 图标上打开文件等。
WWDC 之后我对于 iOS 上的拖拽的印象也是大致如此，功能有如下几项：
文件的传递：从 Files 中拖入拖出文件，把图片拖到 iMessage 里等。
文字的复制粘贴：把文字拖到支持输入文本的地方。
将内容拖拽到按钮上：比如把网址拖拽到 Safari 网址栏的刷新按钮和 Safari 右上角的新建标签页上，效果分别是在当前页打开和新建标签页打开。
从 Dock 栏拖拽 App 进行分屏：如果你外接了键盘，你可以使用 Command + Space 唤出 Spotlight，输入 App 的名称，并拖拽分屏。
iOS 上的拖拽支持多个对象：比如说你可以把一个 App 拖拽起来之后，单击其他 App 图标，把这些 App 一起移动。
这几种拖拽功能就是我从 iOS 11 beta 1 一直用到正式版以来所有的印象，而我常常使用的功能也只有三个。可以说拖拽功能并不是一个让我觉得会为 iOS 带来很大改变的功能。
iOS 应有的样子
实话说我个人非常喜欢 iPad Pro，在那篇中我列举了诸多 iPad Pro 的优点。但其实很多与其说是 iPad Pro 的优点，不如说是 iOS 的优点。我在这里列举一下我眼中 iOS 的优点有哪些：
1. iOS 设备是主动适应的

iPad Pro 在你需要打字的时候可以连上键盘变成电脑的形态，在你需要阅读的时候可以竖屏过来像 A4 纸一般，这是适应你。True Tone Display 可以检测环境让屏幕的颜色更舒适是适应环境。
甚至 Face ID 也是一种主动适应，拿起手机时主动检测是不是你，而不是让你举平手机把眼睛对准两个圆圈来扫描你虹膜，「解锁」的过程在使用手机的体验中隐去。当你看着手机时，降低或关闭消息提醒的声音是主动适应，当你不在看手机时更短的时间息屏也是一种主动适应。
2. iOS 支持多点触控
多点触控（
Multitouch）的意义不只是在于识别多个手指 && 使用 Mac 上的 Trackpad 和 Magic Mouse 也是可以使用各种多手指手势的。我认为真正区别 iOS 与 Mac 的 Multitouch 在于，在 macOS 上只有一个鼠标指针，而在 iOS 上一只手在做的事情不应该影响你的另一只手的操作。
3. iOS 是直观的

直观可以体现在输入和输出两个过程中。输入时，你的操作应该直接作用于你操作的对象。Mac 上使用鼠标指针代替你的手可以说是一种间接，iOS 上使用 Share Sheet 也可以说是一种间接。

输出时，iOS 的图像化是直观的，你可以直接看到你的操作对于被操作对象的影响。iPhone 7 及以后的 Tapic Engine 也是直观的，在你操作之后通过震动反馈增强了操作的实感。
4. iOS 是简单的

记得在《乔布斯传》中我读到过关于 iPad 还是最早期时的一个描述：几个小孩第一次看到 iPad（有可能是第一次看到电子产品，我记不清了），没过一会就玩了起来，书中以这个例子说明了 iPad 是多么的简单易用。iOS 设备的使用是不需要看说明书的，这不只是设备，iOS 上的 App 也应该如此。Workflow 也是自动化变得简单易用的重要一步，虽然还是对于很多人 Workflow 还是有学习难度。
5. iOS 是安全的

iOS 有沙盒机制，苹果设计 iOS 设备时也是软硬件结合来保障 iOS 设备的安全性。你的指纹以及以后的 Face ID 都会被储存在设备里的单独一个硬件上，并在系统层面设计让你的这些身份信息不会被非法访问。iOS 对于安全性的追求应该作为设计 iOS 的功能的底线，而苹果应该做的应该是在保证安全的条件下拓宽可操作的边界。
Drag & Drop 不是什么
要谈论 Drag & Drop 是什么，我认为谈论 Drag & Drop 不是什么更为有效。Drag & Drop 与复制粘贴、Share Sheet 等都是传递信息的方式，不如看一看 Drag & Drop 与它们的区别在哪里。
1. Drag & Drop 不是 Mac 上的拖拽
第一，在 iOS 上的 Drag & Drop 可以同时拖拽多个以及多种对象。比如说同时拖动多个 App 整理 App 位置是拖拽多个，同时拖拽文本与图片到邮件中是拖拽多种。并且在一只手拖拽的同时，你可以另一只手正常操作：打开别的 App，打开某个聊天对话框或者文件夹。记得 macOS 上想要把文件拖到一个深层文件夹时的长时间等待吗？与之相比，iOS 则是一个可以让你用你的十根手指释放潜力的系统。这是 iOS 的 Multitouch。
第二，Mac 上拖拽的主要对象是文件。而在 iOS 上在文本与文件以外，还有很多对象是作为一个复合的整体可以被拖拽。比如说 Notes 中拖出来时实际上有有纯文本和富文本，文字内容保存在纯文本中，而手写的内容会作为图片保存在富文本中。如果你像我一样用 Notes 都是使用 Apple Pencil 在上面手写，那你以后给别人分享手写的笔记就不需要再截屏了，直接拖拽发给别人就好了。再比如说邮件拖拽出来也是包括了纯文本（邮件标题）、富文本和邮件链接。
Notes 和 Mail 实际拖拽出的数据
播客「」一期中， 讲到实际上被拖拽的内容会带有一个名为 Uniform Type Indentifier（UTI）的数据，这个数据描述了你拖拽出来的复合内容里都有什么类型的数据。这让 iOS 上 Drag & Drop 不止于文本与文件成为可能。而 App 可以根据自身 App 和传递过来的数据做出各种效果，达到一种「It just works」的效果。这一点是 iOS 的主动适应和直观的特点的重要基础。
2. Drag & Drop 不是复制粘贴
Drag & Drop 与复制粘贴的区别主要有两点：
第一，复制粘贴是移动文本，可以被选择的文本就可以被复制粘贴到可以编辑文本的地方（聊天软件输入框、文本编辑器等）。我们可以注意到，复制粘贴的一个必要条件是，粘贴的目的地是一个输入框。而 Drag & Drop 可以说是复制粘贴的父集。Drag & Drop 的目的地可以是任何可以和文本发生动作的地方。
最简单的例子是你可以把一个网址拖拽到 Safari 网址栏右边的刷新位置以及最右边的新建标签页位置。这两个位置并没有输入框，但是可以与文本发生的动作非常明显：使用被拖拽的网址刷新当前页和新建标签页。
网址拖拽到 Safari
另一个例子是，你可以把一段文本拖拽到&&中，而不是先点击加号新建任务，再把文本复制粘贴进去。这让 iOS 上操作的直观性更上一层。
第二，Drag & Drop 更加安全。这个例子我最初是从& 在
中写的「iOS 11 的拖拽功能与安全」一文里读到的。使用密码管理 App 的人，对于不支持直接填充密码的 App 一直以来的做法是手动把密码复制进去。但是剪贴板是可以被其他 App 访问的。当你打开了一个 App 或者打开了 Widget 栏时，被打开的 App 和 Widget 栏中的 App 就可以访问你的剪贴板。这也是为什么剪贴板管理 App 必须分屏打开或者一次次拉出 Widget 才可以记录你的剪贴板的原因。
macOS 上&&可以设置数秒后清空剪贴板，但 iOS 上并没有这样方便。而 1Password 支持 Drag & Drop 之后，现在可以直接把密码不通过剪贴板拖入 App，大大增强了安全性。
1Password 使用 Drag & Drop 填充密码
Drag & Drop 本身是一种授权行为，而整个 Drag & Drop 的过程也被设计得很安全。当你把一个对象拖拽到另一个 App 中时，目标 App 并不能访问被拖拽对象，但是可以知道被拖拽对象的 UTI。
这样一来，目标 App 既可以根据数据类型告诉你可以拖拽到哪里，使用动画等效果配合拖拽，又在你放手确认拖过去之前不会访问到你的数据，不需要担心自己的数据会在随意拖拽的过程中被 App 恶意记录下来。这也在不牺牲安全性的条件下保证了直观性。
3. Drag & Drop 不是 Share Sheet
Share Sheet 是 iOS 上一直以来最主要的传递文件的方式。而 Drag & Drop 在我看来仍比 Share Sheet 有优势。
第一，Drag & Drop 要直观许多。添加 PDF 到&&是我在写完文章初稿，要检查语句通顺和错别字，以及构思配图时常常要做的事情。使用 Share Sheet 把 PDF 分享到 GoodNotes 之后需要再到 GoodNotes 中选择存放的 Categories。而使用 Drag & Drop 时你只需要把 PDF 拖拽过去，拖到哪个 Category 就存在哪里。这让 Drag & Drop 的过程比 Share Sheet 直观流畅许多。
第二，Drag & Drop 可以分享出更多种类的数据。再以 GoodNotes 为例，GoodNotes 对于 Notebook 只提供了分享为 PDF、图片和 GoodNotes 的特有格式。但是当我把笔记的一部分拖拽到只支持文字的 App 中会发生什么？GoodNotes 会使用内置的 OCR 把手写笔记识别为文字分享出来。
（你可以 GoodNotes 的更新详细内容）
Goodnotes 拖拽到 Drafts 中
开发者并不一定会对 Share Sheet 开放很多数据。但是为了 Drag & Drop 可以有用户期待的效果，他们需要去考虑当用户把东西拖拽出来的时候，都需要分享什么数据出来。这就意味着很多以前 Workflow 都不方便完成的事情现在可以使用 Drag & Drop 完成。比如说原生的邮件客户端并不支持 Share Sheet 分享，但是你可以把一封邮件拖拽出来。这使得把邮件添加到任务管理 App 方便了许多。
4. Drag & Drop 不是（或者说是？）Workflow
在中我说到：
我期待收购了 Workflow 的苹果会在一年后是几年之后突然把自动化做进 iOS，并把自动化做成一个门槛更低的技术。
现在我认为 Drag & Drop 很有可能就是第一步。在你想要反驳我之前，先听我讲一下我眼中的&。Workflow 是一个在 iOS 的沙盒机制中使用 URL Scheme 和各种网络服务还有自带的一些动作来完成 App 之间数据的加工和传输的 App。Workflow 的步骤常常是，通过 Share Sheet 或剪贴板获取数据（或者不输入数据），进行一些处理，发到另一个 App。
那 Drag & Drop 呢？获取和发送的部分分别对应 Drag 和 Drop，只需要等待更多的 App 适配就好。而重点是对数据进行处理的部分。Drag & Drop 当然不会有 Workflow 的处理的自由度，更不要提 Workflow 与多个 App 互动的能力。但是 Drag & Drop 已经显现出代替很多简单 Workflow 的能力。
Drag & Drop 是一个直观的操作，结果也需要是直观的。比如说&JailbreakHum 的中展示了把邮件拖拽到&&时，Todoist 会新建一个点击题目就可以跳回邮件的任务。而即便是&&这种支持 Share Sheet 分享出邮件题目和链接的邮件客户端，我们也需要使用 Workflow 把题目和链接变成 Markdown 的 [title](url) 格式，更不要说原生邮件客户端不支持 Share Sheet 了。
将邮件拖入 Todoist
任务管理 App 对于 Drag & Drop 的应用不只如此。根据 ，OmniFocus 可以对于特定格式的文字自动添加 Flag、起始和截止日期，还可以把列表添加为多个任务。
OmniFocus Drag & Drop 任务列表
列表格式批量添加也可以应用于日历 App。JailbreakHum 在 「」 一文中对于 x-callback-URL 的讲解中使用了批量添加日历事件的 URL Scheme 为例，URL 的复杂程度可能会让很多初次接触 URL Scheme 的人望而却步：
fantastical2://x-callback-url/parse?sentence=[[line|1]]&add=1&x-success={drafts4://x-callback-url/runAction?text=[[line|2..]]&allowEmpty=NO&action=Events%20in%20Fantastical-Quick}&x-cancel={drafts4://}
但是如果以后你只需要用列表的格式在一个可以输入文字的地方输入多个日历事件，之后直接拖拽到日历中就好了呢？iOS 的简单易用性相比会有很大提升。
再以稍后读 App 为例子，我接触 Workflow 使用的第一个 Workflow 是添加文章到&，而现在你可以直接把链接拖拽到 Instapaper 中添加。
&这个稍后读 App 对我的吸引力之一是支持使用 API 搜索。我写文章之前常常会想要把自己读过的关于我要写的主题的文章再读一遍。我会使用 Workflow 搜索，把所有相关文章导出。Instapaper 只能在 App 内搜索却不能方便批量导出。而 Pocket 则可以使用 Workflow 做到。
使用 Workflow 批量导出文章
但是有了 Drag & Drop 之后，Instapaper 也可以比较轻松地导出了。你可以在 Instapaper 中搜索之后，把文章一篇篇拖拽出来。虽然现在还不支持批量拖拽，但是因为你可以筛选一下想要重读的文章，也并非不方便。
Instapaper 搜索之后拖拽文章
Drag & Drop 当然不会替代 Workflow，但是对于很多学习 Workflow 有困难的用户，Drag & Drop 可以给他们带来许多方便。Drag & Drop 作为一个系统层面的功能，需要做的就是满足那些最常用的功能，而 Drag & Drop 在简单需求上的确表现出了可以做到比 Workflow 更加简单易用的潜力。
Drag & Drop 的意义
让 iOS 更加 iOS
Drag & Drop 实际上在各个方面都在让 iOS 更加「iOS 化」。而除了上面所述，我认为 Drag & Drop 一个最明显的影响会发生在 App 的设计上。
可以使用 Drag & Drop 对播客的顺序，归档还是排入队列等进行操作。之后 Ulysses 也。 现在也支持了使用 Drag & Drop 调整事件的日期，包括在 iPhone 上。
Castro & Timepage
Ulysses 上的 Drag & Drop
这不禁让我思考，我们一直使用的 App 设计真的是「iOS 风格」的吗？Castro 的开发团队 ：
很多在 iOS 上的工作流是乏味的，需要点击、滑动、特殊的『编辑』模式，移到顶部来上移屏幕，最后还要找『完成』摁钮。
现在不再需要在某一个角落找到「Edit」或者「Select」，或者是对于一个东西（文件、文章等）右划打开类似 Share Sheet 的功能「Move」，然后选择要移动的位置。现在我们只需要直接拖拽就可以了。所以 Drag & Drop 也是可以代替 App 内的「Share Sheet」的。
这一切都让 iOS 越来越适合「直接操控」，也很可能会对 iOS App 的设计带来巨大的改变。会不会 App 内的「Share Sheet」设计会在以后消失呢？
App 内的&Share Sheet&
用户不会挨个地方尝试支不支持 Drag & Drop 和会得到什么效果。这需要开发者在设计 UI 的时候，就让用户意识到什么东西可以拖动，可以拖到哪里。比如说 Things 中左下角的「添加到收件箱」，Castro 下面的蓝色圆圈等。我认为这会鼓励开发者在 App 中加入更多的动画，对于用户的操作有更多的反馈。这会让 iOS 变得更加丰富和生动，对用户的操作有主动的适应性。
Things 和 Castro 在 UI 上的引导
实体与抽象之间的梯子
从 Macintosh 到 iOS 设备再到 Touch Bar，我认为这些都是去抽象的过程。Macintosh 是从命令行到图形界面，iOS 设备是从间接操作到直接操作，而 Touch Bar 是对摁键与含义不直接相关的功能键（以及程序员 :P）的挑战。在去抽象化的过程中会损失一些上一个范式的便利：图形界面可能对于熟悉命令行的人来说不如命令行快捷，iOS 设备一直被认为限制太多。
但是我们应该做的不是原路返回，而是在探索和扩宽实体与抽象之间的边界的过程中前进，为去抽象化中损失的便利找到合适的非抽象表现方式。在上文的有些例子中，尽管功能有限，但我们可以说 Drag & Drop 的过程如同执行了一个 Workflow：探寻直觉的期待，并把复杂的隐藏在直接操作的背后。
这样的变化肯定会引发一些人的不满。但我认为这样的仍是必要的：不是所有的人都熟记命令行和快捷键，也不是所有的人都会做 Workflow。一套可以让人自由施展想象力的工具才能激发人的想象力，而命令行和快捷键的系统是小众的。从这个意义上来说，我认为 Drag & Drop 意义重大。
现在来看，我当时写的「」一文中讲到的 iPad Pro 的三点局限：专业生产力的缺失、自动化不如 Mac、文件系统 & 拖拽。后两点正在慢慢解决。而第一点也有在不断变好：我记得 Federico 写「」一文时，说到他还需要电脑的情况是剪辑播客。现在 iPad Pro 上也有了可以方便剪辑播客的 App 了。但这一点短时间内仍不会解决，我们还没有摸索出为鼠标键盘设计的生产力软件在直接操作的 iOS 系统上的展现方式。但未来已经离我们越来越近。
本文链接地址：}