Question

我写了更多关于媒体查询的内容，但我需要另一个计划。

我的网站是全屏视频背景100％网站 - 我在Adobe After Effects中制作动画并渲染到VP8＆amp; VP9编解码器。

所有在1080 x 1920看起来都很不错但是如果我将我的浏览器缩小到1366 x 768（笔记本电脑），该网站看起来很糟糕，因为电影裁剪得太多了。

你知道我在另一个文件夹中制作了一个特殊的html文件+ 480p的特殊渲染视频。这看起来非常好。但是，如果用户实时在浏览器中扩展我的网站，我无法重定向。

我需要一个可以实时控制浏览器宽度的脚本，并重定向到特殊专用网站。因为我的电影在webm。 .mp4 .ogv必须从720p刷新到480p，我无法在媒体查询中进行。

我使用html：

<link href="css.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-2.0.1.js"></script>
<script type="text/javascript" src="js/redirect.js"></script>
<body>
<div id="big"><video preload="auto" autoplay loop muted="muted" volume="0">
<source src="video/of.webm" type='video/webm; codecs="vp9"'></video></div>
<div id="menu"><a href="intro.html" class="ex2-fadeout" >In</a> <a href="cut.html" class="ex2-fadeout">Ofe</a> <a href="portfolio.html" class="ex2-fadeout">Pf</a> <a href="kontacy.html" class="ex2-fadeout">Contact</a></div>
</body></html>

我使用

在redirect.js中

$(window).resize(function () { 
    /* call some function */
});

var width = $(window).width();
var height = $(window).height();

$(document).ready(function(){
    //this is called only once
    r($(window).height());
});

$(window).resize(function () { 
    //this is called everytime when you resize window
    r($(window).height());
});

function r(h) {
    if (h > 1024) window.location.replace("http://google.com"); //this is edited
    return 0;
}

我的坏事？

Answer 1

从上面的评论中我可以看到你已经使用了jQuery，所以让我们进入它。有一个DOM事件onResize()，jQuery使这种方式更容易：

$(window).resize(function () { 
    /* call some function */
});

所以现在你需要获得窗口的实际宽度和高度，你已经知道该怎么做了：

var width = $(window).width();
var height = $(window).height();

将从此处复制代码

包装起来

$(document).ready(function(){
    //this is called only once
    r($(window).height());
});

$(window).resize(function () { 
    //this is called everytime when you resize window
    r($(window).height());
});

function r(h) {
    if (h > 1024) window.location.replace("http://google.com"); //this is edited
    return 0;
}

到这里

请参阅fiddle。

document和window尺寸

之间也存在差异

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document
$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document

更多信息here。

浏览器宽度较小后重定向网站到具有视频背景的特殊网站？

1 个答案: