zoukankan      html  css  js  c++  java
  • 排版紧凑情况下IOS 浏览器的文字部分选中问题

    一、需求

    一个每一项都是图文混排的列表页,在需要对其中的某一部分文字进行选中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;

    结尾放一张成功之后的效果图:

     .

  • 相关阅读:
    java类型与Hadoop类型之间的转换
    Elasticsearch之四种查询类型和搜索原理(博主推荐)
    Eclipse/MyEclipse如何快速提取变量(最强帮手)
    8592 KMP算法
    SDUT 1304-取数字问题(DFS)
    堆排序(小根堆)
    Android显示GIF图片
    HDU 1007 近期点对
    java 显示目录下全部文件
    UVa 11292
  • 原文地址:https://www.cnblogs.com/youryida/p/4730994.html
Copyright © 2011-2022 走看看