0

我制作了一个基于流体网格的网站，现在我想在 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 回答