3

初めて「モバイル ファースト」の Web サイトを作成しようとしていますが、ビューポートの増加に応じてコンテンツを条件付きで読み込む最善の方法がわかりません。

たとえば、モバイル用ではなく、デスクトップ ブラウザー用にのみ Twitter フィードを読み込みたいとします。

オプション 1) 表示: なし - コンテンツがまだモバイル用に読み込まれるため、これは好ましくありません

オプション 2) マークアップにコンテンツがありますが、javascript を使用した remove.element - このコンテンツがまだ最初に読み込まれ、その後削除されると思いますか? もしそうなら、良くない。

オプション 3) javascript を使用して、ビューポートの幅が十分に広い場合は、コンテンツをロードします - これは、私が読んだことから推奨されるアプローチのようですが、javascript でマークアップすることは良い考えですか? アクセシビリティ、セマンティクス、seo について考えています。

他のより良い解決策はありますか？

アドバイスをいただければ幸いです。

4

2 に答える 2

1

Modernizrをチェックすることをお勧めします。インストールは簡単で、訪問者のブラウザでHTML5のサポートを確認したり、ウィンドウの幅を確認したりできます。次に例を示します。 

if (Modernizr.mq('(min-width: 400px)')) {
 /* do this for tablets and desktops */
}else{
 /* do this for handhelds */
}

幸運を！

アップデート

ありがとう、しかしその場合、javascriptでそれをまっすぐに行うのは良くないでしょう-if（document.documentElement.clientWidth> 640）

確かに、Twitterフィードをロードするかどうかを決定する特定の例では、オプション3よりも私の提案を使用することの大きな利点はおそらくありません。次に出くわす質問は、さまざまな視点に合わせてCSSをカスタマイズする方法、または訪問者のブラウザーが特定のHTML5機能をサポートしているかどうかをテストする方法です。

確かに独自のアプローチを取り、ケースごとにカスタムjavascriptを作成するか、Modernizrを使用して、訪問者のブラウザがメディアクエリをサポートしているかどうか、respond.jsが読み込まれないかどうかをテストするか、Modernizrを使用してテストすることができます。ビスタのブラウザがジオロケーションまたはhtml5フォームまたは特定のビデオ形式をサポートしている場合...そして条件付きでクロスブラウザポリフィルをロードしない場合。

通常、同じ目標を達成する方法は複数あります。私は車輪の再発明をしないことに強いです;）

于 2013-03-08T19:14:29.220 に答える
0

誰が言いますか？Display:none;これは、特定のビューポートの要素を表示および非表示にするためのベストプラクティスの1つです。そして、アダム、マークアップは各デバイスで最もダウンロードしにくいものです。JqueryまたはJavascriptで要素を非表示にすると、他の処理が必要になります。小さなデバイスは、ロードをサポートしていないか、余分な時間がかかることがあるため、表示されます。

しかし、SEOの目的には落とし穴があります。要素を非表示にするとともにSEO最適化を行うには、CSSを使用してこれらのいずれかを実行できます。

初め、

@media screen and (max-width:480px) {
    div { 
position: absolute;
left: -9999em;
width: 0;
height: 0;
overflow: hidden;
       }
}

しかし、グーグルウェブマスターがそのようなすべてのハッキングを処理するので、それはあまり効果的ではありませんでした。また、Googleのインデックス登録からブラックリストに登録される可能性があるため、これらの最新の方法のいずれかを使用して要素を非表示にする必要があります。

2番、

    div { 
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important; 
  width: 1px !important; 
  overflow: hidden;
           }

または、第三に、

div { 
    color:transparent;
    text-indent:100%;
    overflow:hidden;
    white-space:no-wrap;
    font:0/0 a;
    text-shadow:none;
           }
于 2013-03-08T17:48:28.283 に答える