javascript - 使用 jQuery 根据浏览器宽度加载特定内容

Question

如果浏览器宽度大于 500，我正在尝试加载宽度为 466 的 Facebook 嵌入式帖子。如果浏览器宽度小于 500，将加载相同的 Facebook 帖子，但宽度为 350。 这是我的代码

<div class="col-lg-8 col-md-8 col-sm-12">
<script>
if($(window).width()<500)
{

//Load the post below
<div class="fb-post" data-href="https://www.facebook.com/TedTheStoner/photos/a.255068134610728.57957.255065497944325/671495962967941/?type=1" data-width="350"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/TedTheStoner/photos/a.255068134610728.57957.255065497944325/671495962967941/?type=1">Post</a> by <a href="https://www.facebook.com/TedTheStoner">Ted The Stoner</a>.</div></div>

}
else
{
//Load this post 
<div class="fb-post" data-href="https://www.facebook.com/TedTheStoner/photos/a.255068134610728.57957.255065497944325/671495962967941/?type=1" data-width="466"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/TedTheStoner/photos/a.255068134610728.57957.255065497944325/671495962967941/?type=1">Post</a> by <a href="https://www.facebook.com/TedTheStoner">Ted The Stoner</a>.</div></div>

我不知道该写什么而不是评论，这样脚本才能自动加载正确的版本。

编辑我更新的代码

<script>
$( document ).ready(function() {
if($(window).width()>500)
{
$('.fb-post').attr('data-width',466);
}
});
</script>
<div class="col-lg-8 col-md-8 col-sm-12">
<div class="fb-post" data-href="https://www.facebook.com/TedTheStoner/photos/a.255068134610728.57957.255065497944325/671495962967941/?type=1" data-width="350"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/TedTheStoner/photos/a.255068134610728.57957.255065497944325/671495962967941/?type=1">Post</a> by <a href="https://www.facebook.com/TedTheStoner">Ted The Stoner</a>.</div></div>
</div>

页面仍以 350 宽度加载他发布的页面。这是页面 http://8mags.com/bored/facebook/facebookpastpost01.php

我的页面是响应式的，但 Facebook 帖子不是

Answer 1

你可以这样做:

<script>
    // You may or may not write the below code under the doc ready
    // Depends where and when you want the same to happen
    // For instance in the success function of any AJAX call or something like that
    $(document).ready(function () {
        $('.fb-post').attr('data-width',350);
    });
</script>
<div class="col-lg-8 col-md-8 col-sm-12">
    <div class="fb-post" data-href="https://www.facebook.com/TedTheStoner/photos/a.255068134610728.57957.255065497944325/671495962967941/?type=1" data-width="466">
        <div class="fb-xfbml-parse-ignore">
            <a href="https://www.facebook.com/TedTheStoner/photos/a.255068134610728.57957.255065497944325/671495962967941/?type=1">
                Post
            </a>
            &nbsp;by&nbsp; 
            <a href="https://www.facebook.com/TedTheStoner">
                Ted The Stoner
            </a>.
        </div>
    </div>
</div>

此外，如果您希望您的页面以响应方式工作，您可以使用 CSS 进行控制。为此，您可以引用 this和 this .有关更多信息，只需谷歌“@media CSS”