web-dev-qa-db-ja.com

レスポンシブテーマデザイン：デスクトップ/タブレット上のスライドショーとモバイル上の静止写真を同じテンプレートを使用してどのようにしていますか？

私は自分のカスタムWPテーマを使って最初のレスポンシブWPサイトを構築しています。主要なテンプレートは流動的な部分、固定された部分です。これにより、デスクトップ版、タブレット版、モバイル版の3つの "バージョン"しか作成できませんでした。すべての変更はメディアの問い合わせが原因で起こります。 （サイズはデスクトップの場合768〜1200 px、タブレットの場合530〜767、モバイルの場合300〜529です。）

ホームページ（それ自身のテンプレートがあります）はスライドショーを表示します。スライドショーは反応が早い（まだ設定していない）と主張しており、タブレットのサイズに合わせて動作すると予想しています。しかし、私がモバイルサイズになるとき、私はただ静止した写真を持ちたいです。

スライドショーに「display：none」を使用したくないのは、携帯電話のスペースや電力を消費するためです。私はすべてのバージョンを同じテンプレートに保存したいので、これを実現するには何らかのPHPまたはJavaScriptが必要になると思います。 （他の方法がない限り、私はそれについて聞いてわくわくします！）

誰もがコードを手伝ってくれる？スライドショーのdivがCSSにあります。

#slideshow { 
height: 296px; 
margin: 20px 20px 10px 20px; 
padding: 0;
background-color: #f00;
}/*by not setting a width the sshow box fills the space minus the margins*/

スライドショーのショートコードまたはテンプレートコードは、スライドショーのdivタグの間に入ります。しかし、私はまたモバイル版のためにそこに写真を置きたいと思うでしょう。それで私は私が何らかの種類の「529px以上ならスライドショーを取得し、そうでなければ写真を取得」する必要があると思いますか？私はPHPやJavascriptのプログラマーではありません。カットアンドペーストが得意です！

このサイトは/で見ることができます http://66.147.244.110/~rdbikeco/ - 私たちは現在ページコンテンツを追加する段階にあり、ブログは注意を必要とし、サイドバーは作業を必要とするなどです。しかしシェルページは稼働しています私が書いていると、コンテンツがロードされています。

大歓迎です！

responsive
7
PVA

サーバーサイドのブラウザスニッフィングを使用しないでください。 それ する 失敗する：

ここでの問題は、どのようにモバイルブラウザをリダイレクトするために確実に検出できるかということです。事実は、そうではありません。ほとんどの人はこれをブラウザの盗聴で試みます - ブラウザがリクエストごとにサーバに送るUser Agent文字列をチェックします。ただし、これらはブラウザで簡単に偽装されるため、信頼できず、とにかく真実を語ることはできません。 「ブラウザスニッフィング」は正当に評判が悪いので、最近では「デバイス検出」とも呼ばれていますが、これも同じ欠陥のある概念です。

@kaiserが推奨する$is_iphone変数には欠陥があります（すみません、kaiser、気にしないでください:).

browserが代わりに決め、実際に利用可能なスペースを使いましょう。
最初にmeta要素をドキュメントヘッドに追加して、表示幅がデバイス幅と一致することを確認します。

<head>
    <!-- other stuff -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,target-densitydpi=device-dpi">
</head>

次に、スライダーコンテンツのターゲットを設定します。

<div id="dynamicimgaes">
    <img id="slideshow" src="path/to/default/image" alt="" />
</div>

JavaScriptでは、スライダーを表示するかどうかを決定するために今すぐデバイスの幅を使用できます。

これがjQueryの例です（テストされていないので、うまくいくまで気軽に編集してください）：

<script type='text/javascript'>
if ( 480 < jQuery( window ).width() )
{
    jQuery(document).ready( function()
    {
        jQuery.get(
            'http://path/to/slider/content',
            function( data )
            {
                jQuery( "#slideshow" ).replaceWith( data );
            }
        );
    });
}
</script>
14
fuxia

この答えは歴史的な理由から（そして@toschosの答えにも含まれているので）ここにあるだけです。 tl; dr あなたが以下で読むことができるものに頼らないでください。そしてwp_is_mobile()を使わないでください。

コアグローバルに切り替えます。

if ( $is_iphone ) 
    // do stuff for mobile
else
    // do stuff for non-mobile.

基本的にそれはユーザーエージェントのスニッフィングの簡易版です。

1
kaiser