Is it possible, like using PHP with Javascript, to display completely different content (html-piece) at different resolutions?

There is a difficult area on the site, which will not be able to impose an adaptive for mob and desktop. Can this site be made simply different for each resolution?

  • Suppose other content is shown if the browser window is less than 992px

It is desirable that it changes not only for the site loading, but even if the window is enlarged and reduced.

  • one
    Yes, it is possible (you can hang the handler on the window resizing), but I would not recommend (to load or from where you will get the content). Instead, you can show / hide something extra. Change indents, or let's say show the first part + page. - nick_n_a
  • @nick_n_a And a little more? and why would not recommend? The content of the section - the text and pictures will be the same, but there will be a completely different html structure. I do not want to make a subdomain for the mob, but I want the most adaptability. And in some areas it is impossible to make it beautiful and clear. - Vipz
  • @Vipz the first reason why hanging an event to change the window size is bad is performance. The site will significantly slow down on this action, which will cause a bad response. I agree with the first comment - it's easier through mediaquery css to hang display: none styles for certain content, and other blocks to show. The disadvantage of this approach is that the page will be heavy. 2 options are loaded at once. - alexoander
  • @Vipz and many such blocks on the site? If you don’t need to change all the markup, then in general display: none | block; display: none | block; + media query should help solve your problem. Just with one resolution - display the block with a different markup, and hide the previous one. And for substitution on the server for a different resolution - you can catch a ban from the PS ... - Alexander Bragin
  • @AlexanderBragin for the substitution of such a nature (of the same content, just with a different structure) obviously nothing will happen. I'm not going to change bananas for strap-ons. But search engines obviously do not like display: none. Only in the 1st section you need to change the structure. The page weighs 900 kb, loads DOM in 240 ms, the rest in 400 ms and in addition in 600 + ms. Strong handler load? - Vipz

1 answer 1

No problem:

1) A visitor enters the site JS catches his permission and sends to the server via AJAX

2) PHP responds by forming the necessary DIV (block) for this site.

3) JS inserts the block in the right place

4) The same AJAX is hung on the window change event and everything repeats.

PS How many such blocks do you have? Not more than a dozen probably? I would have done so that PHP would immediately generate everything and send them to the frontend, and there JS would have to change them themselves depending on the resolution and it would not be necessary to bomb the server with requests.