0

Fluid Grid ベースの Web サイトを作成しましたが、iframe 内にムービー コンテンツを追加したいと考えています。iframe がサイズを変更しているため、追加するコンテンツを次の 3 つのサイズで作成しました。

-option1 サイズ: 720p: 1280 x 720
-option2 サイズ: 480p: 854 x 480
-option3 サイズ: 360p: 640 x 360

現在、ユーザーの画面を測定し、ボタンの href をオプション 1、2、または 3 に変更するスクリプトを探しています。

ここまで来ました。誰かが例を持っていることを願っています。

<a target="iframe_cinema" onclick="myFunction() href="option1" id="window"  class="button2 white">
            <img src="images/3D.png"</div></a>

<script>
function myFunction()
{

var x=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;


if (Width<640)
  {
  x="option1";
  }
else if (Width<854)
  {
  x="option2";
  }
else
  {
  x="option3";
  }

</script>

前もって感謝します。

4

1 に答える 1

2

別のオプション。サイズに基づいて、メディア クエリと表示/非表示ボタンを使用します。

CSSメディアウェイ

<!DOCTYPE html>
<html>
  <head>
    <style>

        @media screen {
            #div3{ display : block; }
            #div1, #div2{ display : none; }
        }        


        @media screen and (max-width:800px) {
            #div2{ display : block; }
            #div1, #div3{ display : none; }
        }

        @media screen and (max-width:400px) {
            #div1{ display : block; }
            #div2, #div3{ display : none; }
        }

    </style>
  </head>
  <body>
      <div id="div1">ONE</div>
      <div id="div2">TWO</div>
      <div id="div3">THREE</div>
  </body>
</html>

あなたがやっていたJavaScriptの方法：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <a href="#option1" id="myLink">LINKY</a>
    <script>    
        (function(){    
            var link = document.getElementById("myLink");    
            function checkWidth() {
                var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
                    newHref;
                if (width<640) {
                  newHref="#option1";
                } else if (width<854) {
                  newHref="#option2";
                } else {
                  newHref="#option3";
               }
               link.href=newHref;       
            }
            link.onclick = checkWidth;
            checkWidth();
        })();          
    </script> 
  </body>
</html>
于 2013-01-31T16:20:30.720 に答える