10

レスポンシブウェブサイトを作りたいです。ブラウザがモバイルサイズの場合、コンテンツはiPhoneスタイルのリストビューで表示する必要がありますブラウザがデスクトップサイズの場合、コンテンツはタブで表示する必要があります。

ここに画像の説明を入力してください

これを行うための最良の方法は何ですか？ モバイル/デスクトップに別々のファイルを使用したくありません。レスポンシブにしたいと思います。

これが私が行った研究の一部です。

試み1：純粋なCSSソリューション。

CSSはレイアウトを簡単に切り替えることができるメディアクエリを提供するため、純粋なCSSソリューションが最適です。CSSは、タブを作成するためのメソッドを提供します。しかし、それはiPhoneスタイルリストの方法を提供していないようです。（アコーディオンリストでほとんど偽造することができますが、これはユーザーを本物のiPhoneアプリのように別のページに移動させることはありません）。

試行2：Jqueryソリューション（Fiddleを参照）

このフィドルでは、JqueryMobileとJqueryUiを組み合わせてみました。Enquire.Jsは、画面に応じて必要なライブラリを呼び出すために使用されます。

ライブラリが呼び出されると、dom構造が変更されます。したがって、不要なライブラリを削除する必要があります。そうしないと、ユーザーがブラウザのサイズを変更した場合（つまり、モバイルデスクトップを切り替える場合）、未使用のライブラリが破損し、呼び出されたライブラリの競合が発生します。

私のフィドルでは、これを試みましたが、うまくいかないようです：

$(document).ready(function() {

        enquire.register("screen and (max-width: 600px)", function() {
    $('script[src~="jquery-ui.js"]').remove();
    $('link[rel=stylesheet][href~="jquery-ui.css"]').remove();    
     $('head').append('<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />');    
     $('head').append('<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"><\/script>');   
        $("#tabs").tabs("destroy");            
    }).listen();


       enquire.register("screen and (min-width: 601px)", function() {
    $('script[src~="jquery.mobile-1.0a3.min.js"]').remove();
    $('link[rel=stylesheet][href~="jquery.mobile-1.0a3.min.css"]').remove();    
    $('head').append('<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />');        
     $('head').append('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"><\/script>');    
    $("#tabs").tabs();

    }).listen();

});

未使用のライブラリが削除されても、新しいライブラリの競合が発生します。また、レイアウトを呼び出す前に、ブラウザのサイズを変更する必要があります。ユーザーがブラウザのサイズを変更しない場合、コンテンツのスタイルは変更されません。

試行3：Dom Cloning（Fiddleを参照）

この試行は試行2と似ていますが、ページの読み込み時にDOMが変数に格納される点が異なります。次に、ユーザーがブラウザーのサイズを変更すると、既存のDOMが保存されているDOMに置き換えられます。ここではメソッドの概要に従いましたが、うまくいかないようです。domは、置き換えられるのではなく、削除されるだけです。

私は解決策を見つけるために髪を引き裂いてきたので、これで助けていただければ幸いです！（私はこれに似た質問をしたことを知っていますが、この新しい質問は新しい投稿を正当化するのに十分異なると感じました。）

試行4：データ属性の動的な割り当て

Jquery mobileは、マークアップのデータ属性を使用してスクリプトを機能させます。これらを動的に適用しようとしたので、ブラウザがモバイルサイズの場合にのみドキュメントに書き込まれます。ただし、ブラウザのサイズを変更しても、デスクトップタブは壊れたままです。

4

2 に答える 2

4

ここで車輪の再発明をする必要はないと思います。レスポンシブデザインはかなり前から存在しており、すでにWeb開発に嵐を巻き起こしている。そうは言っても、私はあなたがノーのどれでも使うことができることを提案します。レスポンシブフレームの作品はあなたが好きなように動作します。私の個人的なお気に入りであり、使用することをお勧めするのは、TwitterBootstrapフレームワークです。それは信じられないほどスマートで軽量で使いやすく、それらがどのように機能するかについて物事にこだわるときです。iPhoneとデスクトップだけを心配する必要はありません。Twitter Bootstrapは、テーブルなどの他のデバイスにも対応しています。

2つの別々のhtmlファイルを使用せずに、モバイルとデスクトップの両方で同じタブ付きコンテンツを表示したいので、ここで直接質問に答えます。以下は、サンプルデモとして私があなたのために用意したものです。

すべてのコンテンツを含む単純なhtmlファイルがあります。レスポンシブフレームワークとしてtwitterブートストラップを使用しました。

HTML

フィドルを参照してください、ここに貼り付けるには大きすぎます（コンテンツ）:)

CSS

bootstrap.cssとbootstrap-sensitive.cssの読み込みを除いて、ページのレイアウトに合わせてカスタムCSSが必要です。

ここで実際に機能するCSSの最も重要な部分は、メディアクエリです。デバイスの幅を指定し、このデバイスの幅に達したときに、この方法で表示するようにCSSに要求します。メディアクエリの構文は次のようになります。

@media  (max-width:480px) {
   // Custom for device that has width 480px;

}

これで、iPhoneのレイアウトの幅は480ピクセルになりました。ページが表示されているデバイスの場合、要素を480ピクセルの画面に合わせてスタイル設定したいと思います。

このページのカスタムCSSは次のとおりです。

.container {
    margin-top: 10px;
}
.ora, .ban, .man{display:none;}
.fruit-content{width:100%;}
li{display:inline-block;width:24%;text-align:center;border-bottom:1px solid #fff;background: #C0C;}
ul.upperul{margin:0 0 0 0px;width:103%;}
.custom-row{border:1px solid green;}
.selected{background: #c0c0c0;}
@media  (max-width:480px) {
    li{display: block;width: 100%;text-align: left;}
    .custom-row{border:1px solid #000000;}
    ul.upperul{margin-left: 0px;width:100%;}

}

JS

次に、タブ付きコンテンツの切り替えに関する機能部分があります。ほんの数行のコードでjQueryを使用して、タブ付きの方法でコンテンツを設定しました。

$(function() {
    $("li").live("click" , function() {
     $(this).css("background","#c0c0c0").siblings().css("background","#C0C");
     $(".des").hide().eq($(this).index()).show();
    })
    .eq(0).addClass('selected');
});

最後に、これらのピースの構成要素全体がここにあります。

デモ

フルスクリーンの結果はここにあります。ブラウザのサイズを変更して、コンテンツの動作と応答性がどのように達成されるかを確認してください。

于 2012-11-13T01:29:24.150 に答える
0

私は間違いなく試み1に行き、「別のページ」をシミュレートしようとします。この場合、はるかに軽量で柔軟性があります。

私の意見では、試行2と3のオーバーヘッドが大きすぎます。

UXに関するいくつかの考え

UXの観点からは、上記のようにナビゲーションの概念を変更するのは良くないと思います。ブラウザウィンドウのサイズを変更すると、ユーザーが混乱する可能性があります。

于 2012-11-07T19:05:23.343 に答える