web-dev-qa-db-ja.com

サイドバーをロードするための最善のアプローチ画面の最大幅が900px以上の場合のみ

私は最近かなり最近メディアの質問で遊んでいます、そして私はその概念が大好きです。ユーザーの画面の最大幅に応じて、画像を表示したりdiv浮動小数点数を変更したりするのはとても簡単です。

自分のテンプレートにカスタムサイドバーを表示する方法を見つけようとしています。すなわち、最大幅は＞ ９００ｐｘである。

これまでのところ私が見つけたすべての解決策は単純にメディアクエリーを通してdivを隠す/表示するためにcssを使います。

例：

@media screen and (max-width: 880px) {
#secondary-nav  {
    display: none;
}

このアプローチの「問題」は、私がそれを隠しているためにそれを見ることができないデバイスにまだデータを送信しているということです。モバイルユーザーに不要な鼓動を生み出します。

私が探しているのは、それが私の「ルール」に適合する場合にのみサイドバーをロードするための最良のアプローチです。また、win7で横にスナップしたときのように、視聴者がブラウザウィンドウのサイズを変更した場合は、それ自体を再調整する必要があります。

私はjavascriptを使って画面の幅をチェックし、それをcookieに保存するという1つの概念を見つけました。 http://www.yiibu.com/resources/scripts/default.js

私はその時点で私は推測している、クッキーの「幅」のデータをチェックしてからサイドバーを提供するかどうかの方法があるでしょう。

それに関する唯一の問題は、クッキーが有効にされていない場合どうなるのでしょうか。

また、画面サイズが変わると何が起こりますか？それはクッキーが何度も設定/設定解除されていることを意味しますか？

とにかく、これは私にとって処女の領土であるので、私は本当にこれに関するアイデアにオープンです。

ここでの主なアイデアは、小さい画面のために隠されているユーザーのデバイスにデータを送信せずにデバイスに適したWPテンプレートを提供することです。結局のところ、モバイルデータは一種の高価なので、私は私のユーザーを助けるために私ができることをすべてやりたいと思います。

jquerycsstemplatessidebar
1
shawn

私のウェブサイトで、私はAJAXあたりの最近のコメントを480px以上のウィンドウサイズについてロードします。

if ( 480 < jQuery(window).width() )
{
    jQuery(document).ready(
        function()
        {
            jQuery.get('http://toscho.de/?rc', 
                function(data)
                {
                    jQuery(data).insertBefore('#inner');
                }
            );
        }
    );
    jQuery('#posts').after('<div class=clear>&#160;</div>');
}

このコードはかなり古く、エレガントではありません。しかし、それはあなたに正しい方向へのヒントを与えるかもしれません…

2
fuxia

これは私が知っていることをこれを回避する方法ではありません、それはメディアクエリとCSSの問題の一つです。サイト全体でvisibility:hidden;やdisplay:none;を使っているだけのことがよくあります。最善の策は、モバイルとデスクトップで別々のページを作成するか、非常に流動的（動的ではない）な要素を使用することです。私はあなたがJavaScriptとクッキーを使って何かをハックすることができると確信していますが、最終結果はたぶん非常に問題が多く、そしてコンプライアンスに苦労するでしょう。

これは確かな読みです： http://www.alistapart.com/articles/responsive-web-design/

1
Wyck

私はこれを行うための最も厄介な方法はサーバーレベルでuseragentを見て、それに基づいて全角またはモバイルテーマを提供することだろうと思います。テーマ内で、実際のビューポート幅に基づいて要素をさらに表示/非表示にして、それについてもう少し経済的にすることができます。

1
Milo