6

我正在为现有站点改造自适应布局。基本上在 500 像素时，网站会更改为 100% 宽度的移动样式布局。通常我会使用 ems，但正如我所说，我正在改装。

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

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

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

4

5 回答 5

3

如果可以的话，我建议使用 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");
    }
}
于 2013-06-22T09:54:40.797 回答
1

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

@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' />";
}
于 2013-06-22T09:55:06.927 回答
1

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

有关示例，请参见此代码笔。我已经在开发工具中检查了它，以确保不会加载大图像。

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

$(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 或其他东西开始...并给它一个接近您想要的比率的宽度和高度...

这里有一个新的 CodePen：

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);
于 2013-10-17T21:59:24.997 回答
0 
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']

  }]);
于 2013-06-22T09:54:07.553 回答
0

这个问题很老，但我有同样的问题，并想为可能感兴趣的其他人编写我的解决方案。

客户端仅使用 Angular js

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

$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

混合

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

  1. 创建一个设置 cookie 的登录页面（带有闪屏或其他内容）。

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

  2. 然后将用户重定向到主页

  3. 然后使用cookie服务器端显示正确的图像

于 2015-07-15T13:13:05.597 回答