jquery - 使用 jQuery 根据 iPad 方向显示不同的文本

Question

我只想在纵向模式下在 iPad 上显示不同的文本。

使用数据属性，我可以存储纵向文本，但如何检测方向变化并在 iPad 上应用文本？

我的标记目前看起来像这样；

<h2 class="searchLink" data-landscape="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam" data-portrait="Lorem ipsum dolor sit amet, consectetur.">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam</h2>

谢谢

Answer 1

听说过media queries?你不需要 jQuery，你可以使用CSS.

以本教程为例：

Answer 2

您可以绑定到orientationChange 事件。因此，如果您使用的是 jQuery/zepto.js（其他 DOM 库可用等），您可以这样做

$(window).bind('orientationchange', function() {
    //call your text swapping fn here
  });

Mobile Safari 还公开window.orientation了它返回一个表示当前方向的整数（可能的值是 0,90,180,-90）。然后，您可以在 fn 中检查以决定显示哪些文本。

您可能需要将所有这些包装在if(window.orientation)条件中以避免在不支持的浏览器中出现错误。