使用jQuery显示基于iPad方向的不同文本

时间:2012-10-23 14:49:02

标签: jquery custom-data-attribute

我只想在纵向模式下在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>

由于

2 个答案:

答案 0 :(得分:0)

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

例如,查看this教程:

答案 1 :(得分:0)

您可以绑定到orientationChange event。因此,如果您使用的是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)条件中,以避免在不支持的浏览器中出错。