编辑04/2014

Question

我正在为现有网站改造自适应布局。基本上在500px，该网站变为100％宽度的移动风格布局。通常我会使用ems，但正如我所说，我正在改装。

我知道如何有条件地加载js和css，但html和图像怎么样？

在网站的主页上有一个填满屏幕的大图像，我的小屏幕布局上不需要它，所以如果浏览器宽度超过500px，我希望它加载。麻烦的是我无法将<img src="..." />等存储在js中，因为它是用php动态加载的。客户端通过wordpress admin控制图像。

任何想法都将不胜感激。感谢

Answer 1

如果可以，我建议使用div并将background-image属性设置为您需要的图像。您可以使用媒体查询来定位屏幕大小。基本上...

HTML
<div id="splash-image"></div>

CSS
#splash-image {
    background-image: url("small-image.png");
}

@media only screen and (min-width: 500px) {
    #splash-image {
        background-image: url("big-image.png");
    }
}

Answer 2

您可以根据媒体查询设置图像的显示（但无论如何都会加载）

@media screen and ( min-width: 500px ) {
    #image-id {
        display: block;
    }
}

或者，为了不允许图像加载到较小的屏幕，您可以将图像包装在div中（例如，使用id img-container）并执行以下操作：

if(screen.width>500){
    document.getElementById('img-container').innerHTML = "<img src='image_source_url' />";
}

Answer 3

image.load([{

    // Test if media query matches
    test : image.mq('only screen and (max-width: 600px)'),

    // load css and js purely for mobile
    yep: ['/assets/mobile.css', '/assets/mobile.js']

  }]);

Answer 4

这适用于一两件事。对于站点范围的图像加载首选项，还有其他解决方案。

有关示例，请参阅this codepen。我已经在开发工具中检查过它，以确保无法加载大图像。

所以，你找到带有.width()的窗口宽度并将其存储在变量中（无论你想要什么）我称之为 wWidth。然后是一个if语句。如果窗口宽度大于1200px（很糟糕，你不能使用em）--- 那么，加载这个图像 - 否则，加载这个较小的图像。要将其添加到DOM中，请将html附加到具有.appendTo()

的现有div

$(function () {
    var wWidth = $(window).width();
    if (wWidth > 1200) {
        $('<img alt="larger image" src="http://placehold.it/1200/1200"/>').appendTo('.sidebar');
        $('.sidebar a').hide();

    } else {
        $('<img alt="smaller image" src="http://placehold.it/600/600" />').appendTo('.sidebar');
    }
});

此示例适用于地图...所以如果他们想加载谷歌地图，我有一个链接，他们可以按下来加载更好的地图。（但是，如果窗口很大，我就不需要那个链接了 - 所以我用.hide()隐藏它

编辑04/2014

截至2014年4月，我一直在用attr（）切换src，所以这样，你只需将你的图像用于移动设备，然后如果它是一个大屏幕你可以插入更大图像的源...但是然后你加载2张图片...所以你可以改为加载1px x 1px的空白gif或其他东西来开始...并给它一个宽度和高度接近你想要的比例......

a new CodePen here:

HTML

<div class='image-w thing' id='target01'>
  <!-- standard image for small screens or a blank gif or something -->
  <img src='http://placehold.it/640x640&text=Default-image' alt='' />
</div>

的jQuery

var imageSizeThing = function() {

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

  if ( windowWidth < 501 ) {

    // if you start with a blank gif or something
    $('#target01 img').attr('src','http://placehold.it/640x640&text=Default-image');

  } if ( windowWidth > 500 ) {

    $('#target01 img').attr('src','http://placehold.it/1000x1000');

  } if ( windowWidth > 900 ) {

    $('#target01 img').attr('src','http://placehold.it/1800x1800');

  } if ( windowWidth > 1200 ) {

    $('#target01 img').attr('src','http://placehold.it/2400x2400');

  }

};

// call it on DOM ready, and if it makes sense, when the window resizes
$(document).ready(imageSizeThing);

$(window).resize(imageSizeThing);

Answer 5

这个问题已经过去了，但我遇到了同样的问题，并考虑过为可能感兴趣的其他人编写我的解决方案。

客户端仅使用角度js

在客户端，您“发现”应加载的资源的“类型”。例如，在主app控制器中：

$scope.type = (screen.width > 500) ? 'desktop' : 'mobile';
// or window.navigator

然后，在要有条件显示的内容中，添加变量

<img src="images/{{type}}/foo.jpg">

注意：您放置控制器的地方很重要。如果它在</body>标记之前，浏览器将在angular扩展变量之前发出请求。如果它在'`中，则在浏览器发出请求之前展开变量

仅限服务器端（PHP）

您可以使用$_SERVER['HTTP_USER_AGENT'];来检测它是否是移动设备并采取相应措施。

显然用户代理可能会被欺骗，但由于唯一的区别是图片大小，最糟糕的情况是您在大屏幕上提供小图片，反之亦然。

例如：

$useragent=$_SERVER['HTTP_USER_AGENT'];

if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))) {
  $type = 'mobile';
} else {
  $type = 'desktop';
}

然后根据$type

提供相应的图像

混合

您也可以将两者混合使用，特别是如果您对屏幕尺寸（或浏览器的其他属性）比实际用户代理更感兴趣。我经常使用以下策略。

创建一个设置Cookie的目标网页（带有闪屏或其他内容）。

var type = (screen.width > 500) ? 'desktop' : 'mobile';
document.cookie = 'type=' + type + '; expires=Fri, 31 Dez 2020 00:00:00 UTC; path=/';

然后将用户重定向到主页
然后使用cookie服务器端显示正确的图像

有条件地加载响应式设计的图像

5 个答案:

编辑04/2014

HTML

的jQuery

客户端仅使用角度js

仅限服务器端（PHP）

混合