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

【问题标题】：Fixed Responsive sizes of the soundcloud embed player修复了 soundcloud 嵌入播放器的响应大小
【发布时间】：2014-09-20 18:19:46
【问题描述】：

完全披露，我知道的 CSS 足以造成真正的损害。

我希望 soundcloud 嵌入式播放器在台式机上大而在移动设备上小。我似乎无法完成这项工作。固定尺寸在桌面上看起来很棒，但在移动设备上太大了：

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

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

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

看在上帝的份上，我该如何解决这个问题？

感谢您提供的任何帮助。

【问题讨论】：

请发布您的一些css或一些相关代码以帮助社区帮助您
我唯一真正拥有的是嵌入代码。尽管我确实在 Wordpress 上弄乱了对象容器的填充和大小，但这是一条死胡同。因此，真的没有什么可显示的。

标签： wordpress css iframe soundcloud

【解决方案1】：

您可以在body tag 中添加一些mobile detection 类，您的主题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 所示。

【讨论】：