如何为移动设备显示不同的图像大小

时间：2017-03-01 作者：rebeccasmith_me

我已设置以下内容：

add_image_size( \'featured-image\', 1600, 450, true );

这是用来在我正在创建的网站上提供全幅图像的，但是，正如你所想象的，对于移动设备来说，这是重新缩放到一个可笑的小高度，在移动设备上看起来真的很奇怪。

我创建了一个新的图像大小，我将其命名为\'featured-image-mobile\' 尺寸小于等于650px，小于等于448px。

在实际页面上，我显示了全幅图像，如下所示：

<img src="<?php the_post_thumbnail_url( \'featured-image\' )?>"
    alt="<?php echo $altTag; ?>"
    title="<?php echo $titleTag; ?>">

有没有办法让我

the_post_thumbnail_url( \'featured-image\' );

对于除650px屏幕分辨率以外的所有图像，然后将图像大小更改为以下大小？

the_post_thumbnail_url( \'featured-image-mobile\' );

3 个回复

SO网友:Elex

WordPresswp_is_mobile() 可以是您正在寻找的函数。

// Use the build-in function if WP
if(wp_is_mobile()) // On mobile
{
    the_post_thumbnail_url(\'featured-image-mobile\');
}
else
{
    the_post_thumbnail_url(\'featured-image\');
}

SO网友:Svartbaard

您可以输出这两个图像，并使用css在这两个图像之间切换（为了清晰起见，我这里只使用基本的引导类，省略了不必要的标记）：

<div class="featured-image hidden-xs">
   <img src="<?php the_post_thumbnail_url( \'featured-image\' )?>">
</div>

<div class="featured-image-mobile visible-xs-block">
   <img src="<?php the_post_thumbnail_url( \'featured-image-mobile\' )?>">
</div>

或者，您可以将图像的移动版本添加为自定义属性：

<img src="<?php the_post_thumbnail_url( \'featured-image\' )?>" data-mob-src="<?php the_post_thumbnail_url( \'featured-image-mobile\' )?>">

然后在移动设备上使用Javascript切换图像源。

SO网友:Fernando Baltazar

如果要设置不同的图像，则需要执行条件（if）来更改或选择大型设备或移动设备的部件。

function isMobile() {
    return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\\.browser|up\\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
}

// Use the function
    if(isMobile()){
        // Do something for only mobile users
        the_post_thumbnail_url( \'featured-image-mobile\' );
    }
    else {
        // Do something for only desktop users
        the_post_thumbnail_url( \'featured-image\' );
    }

标签： images responsive 小码农

WordPress中的Responsive.css应该优先

wp_enqueue_style( \'style\', THEMEROOT . \'/css/style.css\' ); wp_enqueue_style( \'responsive\', THEMEROOT . \'/css/responsive.css\' ); 我正在使用上述方法将样式表排队，但我想要的并没有实现。不管我写什么responsive.css 应该优先考虑（这意味着此处编写的CSS应该覆盖以style.CSS编写的所有其他内容），但这并没有发生。有没有办法通过Wor

小码农CODE

如何为移动设备显示不同的图像大小

相关推荐

WordPress中的Responsive.css应该优先