Javascript 浏览器宽度变小后是否将站点重定向到具有视频背景的特殊站点？_Javascript_Html_Css_Media Queries_Response.redirect

Javascript 浏览器宽度变小后是否将站点重定向到具有视频背景的特殊站点？

javascript html css

Javascript 浏览器宽度变小后是否将站点重定向到具有视频背景的特殊站点？,javascript,html,css,media-queries,response.redirect,Javascript,Html,Css,Media Queries,Response.redirect,我写了更多关于媒体查询的文章，但我需要另一个计划我的网站是一个全屏视频背景100%的网站-我在Adobe After Effects中制作动画，并渲染到VP8和VP9编解码器在1080 x 1920中，一切看起来都很不错，但如果我将浏览器缩小到1366 x 768（笔记本电脑），网站看起来很糟糕，因为电影剪辑太多了你知道我在另一个文件夹中制作了一个特殊的html文件+480p的特殊渲染视频。这个看起来很漂亮。但是，如果用户在浏览器中实时缩放我的站点，我就无法重定向我需要一个脚本，在控制浏

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

我的网站是一个全屏视频背景100%的网站-我在Adobe After Effects中制作动画，并渲染到VP8和VP9编解码器

在1080 x 1920中，一切看起来都很不错，但如果我将浏览器缩小到1366 x 768（笔记本电脑），网站看起来很糟糕，因为电影剪辑太多了

你知道我在另一个文件夹中制作了一个特殊的html文件+480p的特殊渲染视频。这个看起来很漂亮。但是，如果用户在浏览器中实时缩放我的站点，我就无法重定向

我需要一个脚本，在控制浏览器的宽度在实时，并重定向到专门的网站。因为我的电影在webm。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>

我把什么弄糟了？

从上面的评论中，我可以看出您已经在使用jQuery了，所以让我们开始吧。有一个DOM事件，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;
}

到这里

$(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;
}

看

文档

和

窗口

大小之间也存在差异

$(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

更多信息。

请尝试搜索“检测用户解析javascript”和“重定向javascript”。（如果我没有弄错的话）。谢谢您提供的信息，但是如果我使用：$（document）.ready（function（）{If（$（window）.height（）>1024）{window.location=”“；}）；这不是实时工作。您知道，有时您的分辨率为1920x1080，但您的浏览器不一定是全屏的，有时用户使用1920x1080的3/4或2/4。如何实时检测浏览器宽度以重定向？我将使用媒体查询，但我无法更改html文件中的视频电影。可能是重复的，但在本主题中，我不知道如何制作。：）Kyslik展示了更好更清晰的效果，他创造了非常好的内容！对于新的webdeveloper:）由于重定向功能，请参见我的编辑。只需再次抓取代码并粘贴到您想要的地方。只需在“to wrap it up”和部分分界线之间复制代码。查看我的编辑。请向我们展示您的html标题。我认为您根本没有使用jQuery（包括它）。请参阅我的示例。显然，它将尽快重定向到google.com，但要调整窗口大小，您可以通过单击鼠标右键（页面上的任意位置）并选择“inspect element”选项来浏览google chrome中的代码。你可以下载这个项目。我看你已经成功了。好极了！：）您的网站nucwork.tk/trata在我的机器上正确重定向。。。我有巨大的屏幕大小（32英寸）。如果我改变窗口的大小，它会重定向（我使用的是Chrome和Firefox进行测试）。当我的高度大于1024时，我开始使用非常小的窗口大小，它会重定向到google.com，在我的服务器上和在你的服务器上一样。