0

レスポンシブ Web デザインについて簡単な質問があります。基本的に、コンピューターでビデオを実行する次のコードがあります。

<object width="480" height="360">
<param name="allowScriptAccess" value="sameDomain"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="FileLocationAndName.mp4" width="560" height="469" allowscriptaccess="sameDomain"
allowfullscreen="true" type="application/x-shockwave-flash"></embed>
</object>

そして、iPadで実行するこのコード。

<video width="480" height="360" x-webkit-airplay="allow" controls="true"
autoplay="autoplay">
<source src="FileLocationAndName.mp4/playlist.m3u8" type="video/mp4" />
</video>

コードはそれぞれに対して正しく機能します (実際のファイルの場所を削除したので、間違っているように見える場合はそれが理由です)。各ブロックを適切なマシンに表示し、ページ上の反対側のブロックを非表示にするだけです。「レスポンシブ Web デザイン」を検索すると、なぜ RWD が革新的であるか、完全に時間の無駄であるかについて、独断的なブログが返されます。

私はそれが機能する必要があります。何を含める必要がありますか? CSSか何かでできますか？表示: なし; またはそのようなもの？(私は 2 つ目の Web サイトを作成して維持したくありません。)

ご協力いただきありがとうございます！

4

1 に答える 1

0

はい。メディア クエリを使用して、ブラウザーの幅を検出します。メディア クエリを使用して iPad を検出することができます (簡単な Google 検索で方法が表示されます)。次に、あなたが言ったようdisplay: none;に、隠したいものに使用します。たとえば、class="desktop"デスクトップのビデオとclass="ipad"iPad のビデオに追加します。iPad のメディア クエリには.desktop { display: none; }、 とがあり.ipad { display: block; }ます。メディア クエリの外では、 と が.ipad { display: none; }あり.desktop { display: block; }ます。これが理にかなっていることを願っています。VideoJSのような、より普遍的に機能するビデオ プラグインの使用を検討することもできます。

于 2013-10-28T23:15:53.023 に答える