If I want to display different contents in mobile and desktop, how can I achieve that?. I am thinking about creating a content fragment with multiple variations. Is there any option to author one variation of content fragment for mobile and another variation for desktop for the same page?
I think the answer to this depends largely on your definition of "mobile". On the sites I support, we define mobile based on a screen size. Our primary reason for targeting a screen size is to A) make sure that the user experience at that size is optimal and B) make sure we don't send unnecessary assets to a device that won't use them (i.e. don't send large images to a small screen that will only squeeze it down to less than 300px wide.)
I also think an important question you have to ask is who is going to be authoring the content for desktops and mobiles? I think your idea to use experience fragments (has to be experience fragments because you would want to control all aspects of the layout, etc. not just copy) is not a bad one.
The method we use is a custom component we have built that we call the content targeting container. It allows an author to author two or more different experiences on the same page, then define device size breakpoints for each experience. Then we use JS on the front end (matchMedia) to determine, based on the screensize, which experience to fetch, and then make an ajax call back to the server for that experience.
Thank you jeff.foxx for your response. I got your point of creating a custom component which give the option to author for multiple devices and rendering will take place based on client side and server side logic.
I may not need an experience fragment because I am only concerned about text content. So I don't end up creating multiple text components for the same page for multiple devices. I would like to know whether we can leverage the capability of variations in content fragments for this purpose or the purpose of fragments is only to place variations in different pages.