问题
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.
Responsive vs NonResponsive
回答1:
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.
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">';
}
}
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.
回答2:
I've found that setting width and height parameters to vmax and vmin respectively will make any page look the same on any screen size. What you would want to do is determine the height and width of the element in pixels on desktop and then divide the width properties (ie max-width) by your screen width and height properties by your screen height. It also takes care of if the user rotates their phone.
来源：https://stackoverflow.com/questions/50954995/can-i-make-a-section-of-a-responsive-wordpress-site-not-responsive