Is there an adverse effect of capturing screen size with JS and rendering different HTML contents via AJAX based on user's screen size, mainly from SEO perspective?
I'm working on an ecommerce app where the homepage can be too lengthy for mobile device. For instance, there is a tab content which displays several tab-headers and 8 products per tab. This is good on tablet/desktop, but too lengthy on mobile, leading to poor user experience. What our company decided is to display only the tab headers on mobile, and not render any product under the tab. However, hiding all the products with all the thumbnail images via CSS seems like a waste. This led me to load the contents via AJAX based on user's screen size. The drawback is of course, when the user resizes the browser, the web app will still display the tab headers unless a full refresh is done. This is not a problem for us.
So the main question is - is it a good practice to render different HTML contents from server-side based on screen size?
Also, we prefer not to separate the website into two versions (m.example.com and example.com) because there are just few scenarios where we feel that rendering different HTML contents are required for better performance.