使用jQuery顯示基於iPad方向的不同文本

我只想在縱向模式下在iPad上顯示不同的文本。使用jQuery顯示基於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>

感謝

來源

2012-10-23 webworker

聽過media queries?你不需要jQuery的，你可以使用CSS。

看this教程例如：

來源

2012-10-23 14:52:02 user1717526

已經使用媒體查詢..所以你建議基於設備寬度顯示/隱藏（在這種情況下，h2）呢？ – webworker

當然可以。例如，您可以在媒體查詢中爲您不希望在Ipad上顯示的元素設置「display：none」。 – user1717526

我想保持DOM清理額外的標記，所以我不認爲隱藏媒體查詢是相當正確的.. – webworker

您可以綁定到orientationChange event。所以，如果你正在使用jQuery/zepto.js（其他DOM庫可等），你可以做

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

移動Safari瀏覽器也暴露window.orientation返回表示當前方向（可能的值：0,90,180，整數 - 90）。然後，您可以在您的fn中確認要顯示的文字。

您可能需要在if(window.orientation)條件中包含所有這些以避免在不支持的瀏覽器中出現錯誤。

來源

2012-10-23 14:58:54

使用jQuery顯示基於iPad方向的不同文本

回答

相關問題