排版紧凑情况下IOS 浏览器的文字部分选中问题
2015-08-14 19:41
274 查看
一、需求
一个每一项都是图文混排的列表页,在需要对其中的某一部分文字进行选中copy的时候,IOS个二货每次都是直接选中了整个列表项,无论怎么操作它的选框都没有办法做到部分选中。
这是我本周遇到遇到的最奇葩的问题,没有之一。
二、思路
仔细思考并试验之后,找到了三个解决方案:
(一)放开页面的缩放限制,在用户把页面放大的情况下,文字选中会相对容易很多;
(二)把需要选中的文字放进input[text],然后用oninput屏蔽掉input的输入;
(三)分析html/css研究下ios为啥总是傻傻分不清楚,只能整块整块的选中;
方案一,因为页面是在webview中展现,允许缩放会和native的整体风格不协调,并且对用户来说,交互门槛略高,选中效果也不是很理想,直接pass掉;
方案二,完美实现长按选中,部分复制。but,会不可避免的弹出系统的输入法,产品经理以体验太差直接毙掉,无奈,继续研究方案三。
变换html结构、css定位,由简到繁各种对照...过程之波折略掉一千字。
三、总结
ios的长按选择功能,是有bug的。
在html节点太密集或者有元素浮动或者文本节点间距/行高太小的时候,长按出来的选框容易把这一坨都选上,而其中的细节它傻傻分不清楚;
so:
1.外层容器与文本节点以及文本节点之间,间距或行高适当增大(以手指轻触屏幕时的压屏范围为参照,14px差不多了);
2.外层父容器设置-webkit-user-select:text;其他无关子节点设置-webkit-user-select:none;
3.避免使用浮动;
4.外层容器避免设置行高,尤其是无单位数字取值的行高,如line-height:1;
5.避免多层嵌套;
6.容器多用绝对定位;
7.使用table布局,可以保持清晰的html结构,帮助ios识别;
8.如果是列表项,listbox设置overflow:hidden;
9.非需要选中部分尽量不要设置line-height;
结尾放一张成功之后的效果图:
.
一个每一项都是图文混排的列表页,在需要对其中的某一部分文字进行选中copy的时候,IOS个二货每次都是直接选中了整个列表项,无论怎么操作它的选框都没有办法做到部分选中。
这是我本周遇到遇到的最奇葩的问题,没有之一。
二、思路
仔细思考并试验之后,找到了三个解决方案:
(一)放开页面的缩放限制,在用户把页面放大的情况下,文字选中会相对容易很多;
(二)把需要选中的文字放进input[text],然后用oninput屏蔽掉input的输入;
(三)分析html/css研究下ios为啥总是傻傻分不清楚,只能整块整块的选中;
方案一,因为页面是在webview中展现,允许缩放会和native的整体风格不协调,并且对用户来说,交互门槛略高,选中效果也不是很理想,直接pass掉;
方案二,完美实现长按选中,部分复制。but,会不可避免的弹出系统的输入法,产品经理以体验太差直接毙掉,无奈,继续研究方案三。
变换html结构、css定位,由简到繁各种对照...过程之波折略掉一千字。
三、总结
ios的长按选择功能,是有bug的。
在html节点太密集或者有元素浮动或者文本节点间距/行高太小的时候,长按出来的选框容易把这一坨都选上,而其中的细节它傻傻分不清楚;
so:
1.外层容器与文本节点以及文本节点之间,间距或行高适当增大(以手指轻触屏幕时的压屏范围为参照,14px差不多了);
2.外层父容器设置-webkit-user-select:text;其他无关子节点设置-webkit-user-select:none;
3.避免使用浮动;
4.外层容器避免设置行高,尤其是无单位数字取值的行高,如line-height:1;
5.避免多层嵌套;
6.容器多用绝对定位;
7.使用table布局,可以保持清晰的html结构,帮助ios识别;
8.如果是列表项,listbox设置overflow:hidden;
9.非需要选中部分尽量不要设置line-height;
结尾放一张成功之后的效果图:
.
相关文章推荐
- IOS开发中使用TFHpple解析html
- IOS动画效果[转载]
- IOS开发中rss解析数据解析
- ios Masonary的使用
- 使用iOS自带AAC编码器
- 让 iOS 设备 “说出” 你想说的话!! #DF
- Ios8 Xcode6 设置Launch Image 启动图片
- iOS真机系列之真机调试
- iOS NSString 为什么要使用copy,而不是retain?
- iOS XCode启用/关闭Clang Warnings
- iOS小白进阶之旅(二)
- iOS编程规范
- ios检测设备摄像头、指南针、录音、陀螺仪的状态
- iOS 触摸的位置放一个大头针
- 关于iOS审核加急的 账号问题说明
- 文章标题
- iOS终止函数exit
- IOS 编程初体验 第一篇:自学和培训的选择
- iOS 推送错误 code=3000 aps-environment 的授权字符串
- ios 后台执行代码