I've got a WordPress install where I'm trying to change this content_width code:

if( ! isset( $content_width ) ) $content_width = 290;

in my functions.php file based on the users screen size. I've tried using CSS media queries, but for our particular use-case, I need to be able to change this in the functions.php file based on the users screen size.

Ideally 1080 for Desktop, 720 for tables, and 290 for mobile.

Any ideas?

  • PHP is executed before you have access to the user's screen size. Some mobile phone browsers are sending the size in their User-Agent string, but that's not very reliable. Besides that, it is impossible. – fuxia Feb 16 '16 at 0:43

The nature of $content_width is not to be responsive, there is just nothing you can do to it on wordpress side that will change that. For example it is the width that youtube videos will get when they are embedded and the canculation is done only once and will not be redone again unless you clear the relevant cache.

In general you should avoid any client properties detection on server side (what happens if the window size is changed, something that can happen even on surface and ipad), but if you have a good reason for that, you should filter the content before outputting it to adjust relevant sizes.

  • Thanks Mark, we are using the JetPack Plugin Tiled Gallery inside of tabs and on mobile devices it's not adjusting to the content width. So it seems the fix is to adjust that content width based on mobile devices as no CSS seems to fix the issue (I've tried). I'm wondering if a solution like this could work…to add this code: link Which will add the browser class to the body, then use a solution similar to this to target the browser class: link I'm not sure what the code would be. Any ideas? Thanks! – Jason Feb 18 '16 at 7:32
  • I am not familiar with jetpack, but you should ask about specifics at their support. but in general if all you need to do is insert a device based class on the body element you can easily do it with JS, it is no different then any other elements in this regard. You might pace the JS right after the body element is being output, and use "bare" dom API for it to avoid visual flicker/reflow that might happen when you do such things after the page finished loading (the way that most JS is being done). hmmm google search don't seem to have anything relevant, but it should not be hard to do. – Mark Kaplun Feb 18 '16 at 9:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.