2

我正在开发一个响应式网站。我正在使用 CSS 媒体查询和自适应图像 (http://adaptive-images.com/) 在不同的设备上正确呈现每个页面。

我的问题是即使隐藏了一些元素也会被浏览器下载！例如，具有属性 {display:none;} 的元素被下载，尽管我不想要它。

所以，这是我的问题：有没有办法根据设备的屏幕尺寸添加或删除 HTML 代码？

通过阅读“自适应图像”脚本的代码，我看到他们使用了一个存储屏幕大小值的 cookie。

    <script>
    document.cookie='resolution='+(window.innerWidth)+'; path=/';
    window.addEventListener("resize", function() {
        document.cookie='resolution='+(window.innerWidth)+'; path=/';
    }, false);
    </script>

因此，我尝试使用 PHP 函数读取此 cookie：

<?php 
    $fallback_res = 481; 
    $res = !empty($_COOKIE['resolution']) ? $_COOKIE['resolution'] :  
    $fallback_resolution; // Get the viewport resolution in $res variable
?>

它允许我编写一个非常有用的 PHP 条件：

<?php if(isset($res) AND $res >= $fallback_res) // if viewport >= 481px
{
        echo '<video>...</video>'; // Display the video 
}
else { //if the screen is smaller
    echo ''; // Echo something else 
}

?>

它工作得很好。如果视口 < 481px，则不会下载视频。如果视口 > 481px，则下载视频。但它只在页面加载时有效！如果我使用 480-wide-opened-browser 加载页面（=未加载视频），然后将我的浏览器调整为更高分辨率，页面中间会有一个大洞。

我需要的是在窗口调整大小时重新加载部分代码。（每次我调整浏览器窗口的大小时，我希望 $res 条件自动更新，下面的代码也是如此）

谢谢。

4

2 回答 2

3

如果你将打击 jquery 代码与 ajax 结合起来，也许你可以做到这一点。

$(window).resize(function() {
    if($(window).width() > 480 )
    {
        #ajax code for download video
        #or use .after in jquery 
    }
})
于 2012-04-23T14:07:48.613 回答
0

Html 看起来像

<div id="phone">Content For the below 450px </div>
<div id="desktop">Content For the above 450px </div>

添加 jQuery 

if($(window).width() < 450 )
    {
        $('#desktop').remove();
    }
     else 
   {
        $('#phone').remove();
   }
于 2012-04-23T15:09:55.177 回答