html - iOS 上 HTML 中不可选择的文本

Question

如果您在 iOS 上访问此页面，您将无法选择任何文本。
此页面不包含任何 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，因此仍然需要为它们定义 none。

-o 前缀不受支持，但我遇到了将其包括在内以供将来校对的建议，除非缩小至关重要，否则它不会受到伤害。

无前缀的属性应该排在最后。

Answer 2

的计算高度#div8为 0。将其更改为 100% 可以解决我的问题。

Answer 3

请你试试这个：

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”

Answer 4

降低

<meta charset="UTF-8" />

进入头部