Question

如果您访问iOS上的 this 页面，您将无法选择任何文字。
此页面不包含任何javascript或选择阻止代码，实际上如果你在桌面浏览器上打开它，一切都会有效。

我正在尝试在iOS上实现EPUB3阅读器，此页面是使用WYSIWYG EPUB3编辑器生成的。

所以问题是：如何在不更改视觉布局的情况下启用此页面上的选择？
非常重要的是：我希望能够实现自动化的解决方案。这样我就可以在我的阅读器打开之前对这个html文件进行预处理。

更新：选择仅在缩放到约400％时才开始工作。

Answer 1

以下是不可选文本的跨浏览器样式列表：

-webkit-touch-callout: none;
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: moz-none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none;

您也可以将它们设置为选择文字：

-webkit-touch-callout: default;
  -webkit-user-select: text;
   -khtml-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
       -o-user-select: text;
          user-select: text;

-webkit-touch-callout属性允许您指定当用户点击并保持iOS上的链接时发生或不发生的情况。默认值为默认值，并在链接上点按即可显示链接气泡对话框;通过使用none的值，泡沫永远不会出现。

-khtml前缀早于-webkit前缀，并提供对Safari 2.0的支持 -

-moz前缀定义两次，值为none，值为-moz-none。使用-moz-none而不是none可以防止元素和子元素被选择。然而，像Netscape这样的老式浏览器无法识别moz-none，因此仍然需要为它们定义无。

不支持-o前缀，但我已经提出了将其包含在未来打样中的建议，除非缩小是至关重要的，否则它不会受到伤害。

非前缀属性应排在最后。

Answer 2

#div8的计算高度为0.将此值更改为100％可以解决问题。

Answer 3

降

<meta charset="UTF-8" />

进入头部

Answer 4

请你试试这个：

body {
zoom: 1;
margin: 0;
padding: 0;
width: 512px;
height: 768px;
-webkit-user-select: text; // THIS ALLOW SELECT TEXT ON IOS
}

-webkit-user-select，也是值：“none”，“all”，“element”

iOS上的HTML中无法选择的文本

4 个答案: