我可以让响应式 WordPress 网站的一部分不响应吗? [英] Can I make a section of a responsive WordPress site NOT responsive?

问题描述

我有一个完全响应式的 WordPress 网站，我很喜欢它——但其中一个页面是两列歌曲列表.它在移动设备上看起来真的一团糟，所以我想知道是否有标签或我可以为歌曲添加代码的东西，这样只有那个部分不会响应并且只是与其他设备成比例地缩小.见截图.有时我认为无响应的网站看起来更好.除了音乐页面之外，这个很好.我只是不喜欢这些歌曲在移动设备上的排列方式.

I have a WordPress site that is fully responsive which I love-- but one of the pages is a list of songs that are in 2 columns. It looks really messed up on mobile devices so I was wondering if there are tags or something I can put around the code just for the songs so that only that section would NOT be responsive and just shrink in proportion with other devices. See screenshot. Sometimes I think non-responsive sites look better. This one is fine except for the Music page. I just don't like how the songs line up on mobile devices.

推荐答案

首先让我声明您应该在移动设备上为它们找到替代/合适的布局(例如单列，或在 2 列中单击 > 弹出).最简单的做法是将媒体查询设置为它们开始看起来很糟糕"的大小，并将其强制为单列.

First let me state that you should find an alternate/appropriate layout for them on mobile (such as single column, or click > popup in 2 column). The easiest thing to do would be to set a media query at the size they start to "look bad" and force it into a single column.

也就是说，您可以有条件地加载视口元标记 很容易使用 wp_head 钩子，或者如果您的主题有每页"标题/元标记部分，只需在其中添加元标记.如果没有，您的 functions.php 文件中的以下内容应该可以工作:

That said, you can conditionally load in a Viewport Meta Tag pretty easily using the wp_head hook, or if your theme has a "per page" header/meta tag section, just add the meta tag in there. If it does not, something like the following in your functions.php file should work:

add_action( 'wp_head', 'add_custom_viewport_meta' );
function add_custom_viewport_meta(){
    if( get_the_ID() == 123 ){
        echo '<meta name="viewport" content="width=device-width, initial-scale=1">';
    }
}

当然，将 123 替换为您希望其显示的页面的实际 ID，并将 initial-scale=1 替换为任何给您所需外观的数字.

Of course, replace 123 with the actual ID of the page you want it displayed on, and replace initial-scale=1 with whatever number gives you the desired appearance.

这篇关于我可以让响应式 WordPress 网站的一部分不响应吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！