我可以使响应式WordPress网站的一部分不响应吗？

Question

我有一个完全响应的WordPress网站，我很喜欢，但是其中一个页面是2列歌曲列表。它在移动设备上看起来真的很混乱，所以我想知道是否有标签或可以在歌曲代码周围放一些东西，以便仅该部分不会响应，而只会与其他设备成比例缩小。查看截图。有时我认为无响应的网站看起来更好。除“音乐”页面外，此功能还不错。我只是不喜欢歌曲在移动设备上的排列方式。

响应式与非响应式

Answer 1

首先让我指出，您应该在移动设备上为它们找到替代/合适的布局（例如单列，或单击> 2列弹出菜单）。最简单的方法是将媒体查询的大小设置为它们开始看起来“不好”的大小，然后将其强制放在单个列中。

也就是说，您可以使用Viewport Meta Tag挂钩有条件地轻松加载wp_head，或者如果您的主题具有“每页”标头/元标记部分，只需在其中添加meta标记那里。如果没有，则functions.php文件中的以下内容应该可以正常工作：

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替换为任何具有所需外观的数字。

Answer 2

我发现将width和height参数分别设置为vmax和vmin可以使任何页面在任何屏幕尺寸上看起来都一样。您要做的是确定桌面上元素的高度和宽度（以像素为单位），然后将width属性（即max-width）除以屏幕宽度，并将height属性除以屏幕高度。它还可以照顾到用户是否旋转手机。