2

私はレスポンシブ Web サイトに取り組んでいます。CSS メディア クエリとアダプティブ イメージ (http://adaptive-images.com/) を使用して、さまざまなデバイスで各ページを正しくレンダリングしています。

私の問題は、非表示の要素がある場合でも、一部の要素がブラウザーによってダウンロードされることです! たとえば、プロパティ {display:none;} を持つ要素は、必要ないにもかかわらずダウンロードされます。

それで、ここに私の質問があります: デバイスの画面サイズに応じて HTML コードを追加または削除する方法はありますか?

「Adaptive Images」スクリプトのコードを読むと、画面サイズの値を保存する Cookie が使用されていることがわかりました。

    <script>
    document.cookie='resolution='+(window.innerWidth)+'; path=/';
    window.addEventListener("resize", function() {
        document.cookie='resolution='+(window.innerWidth)+'; path=/';
    }, false);
    </script>

そこで、PHP 関数を使用してこの Cookie を読み取ろうとしました。

<?php 
    $fallback_res = 481; 
    $res = !empty($_COOKIE['resolution']) ? $_COOKIE['resolution'] :  
    $fallback_resolution; // Get the viewport resolution in $res variable
?>

これにより、非常に便利な PHP 条件を記述できます。

<?php if(isset($res) AND $res >= $fallback_res) // if viewport >= 481px
{
        echo '<video>...</video>'; // Display the video 
}
else { //if the screen is smaller
    echo ''; // Echo something else 
}

?>

それは非常にうまく機能します。ビューポートが 481px 未満の場合、ビデオはダウンロードされません。ビューポートが 481px を超える場合、ビデオはダウンロードされます。しかし、それはページの読み込み時にのみ機能します! 480 ワイド オープン ブラウザー (= ビデオが読み込まれていない) でページを読み込んでから、ブラウザーのサイズをより高い解像度に変更すると、ページの中央に大きな穴ができます。

必要なのは、ウィンドウのサイズ変更時にコードの一部をリロードすることです。(ブラウザ ウィンドウのサイズを変更するたびに、$res 条件が自動的に更新され、次のコードも同様に更新されます)

ありがとう。

4

2 に答える 2

3

打撃jqueryコードとajaxを組み合わせると、おそらくそれが可能になります。

$(window).resize(function() {
    if($(window).width() > 480 )
    {
        #ajax code for download video
        #or use .after in jquery 
    }
})
于 2012-04-23T14:07:48.613 に答える
0

HTMLは次のようになります

<div id="phone">Content For the below 450px </div>
<div id="desktop">Content For the above 450px </div>

jQueryを追加 

if($(window).width() < 450 )
    {
        $('#desktop').remove();
    }
     else 
   {
        $('#phone').remove();
   }
于 2012-04-23T15:09:55.177 に答える