Question

完全披露，我知道足够的css会造成真正的伤害。

我希望soundcloud嵌入式播放器在桌面上很大，在移动设备上很小。我似乎无法做到这一点。固定大小在桌面上看起来很棒但在移动设备上太大了：

http://jmobley23.wpengine.com/project/veronica-mars-movie/

最大宽度和高度设置为％100的播放器在移动设备上看起来很棒但在桌面上却太小了：

http://jmobley23.wpengine.com/project/hateful-8-trailer/

对于上帝之人的爱，我该如何解决这个问题？

感谢您提供的任何帮助。

Answer 1

您可以在mobile detection中添加一些body tag类，您的主题header.php必须包含：

<body <?php body_class(); ?>>

然后在functions.php上添加过滤器：

add_filter( 'body_class', 'body_class_so_25951935' );

function body_class_so_25951935( $classes ) {
    if( wp_is_mobile() ) {
        $classes[] = 'mobile';
    } else {
        $classes[] = 'desktop';
    }
    return $classes;
}

最后，CSS：

body.mobile .soundcloud-object {
    /* your rules */
}

可以使用MobileDetect等内容对移动设备进行微调，如blog post所示。

修复了soundcloud嵌入播放器的响应大小

1 个答案: