I have built a small payment app, that works for all standard web browsers from laptops/pcs.
However, when accessing the pages from mobile devices, arghhhhhhh. It's a whole new story.
Visualforce, at its core, is HTML with proprietary markup options. Salesforce lets you modify the apex:page tag so that you can make the page look more like familiar HTML. For example: applyHtmlTag, applyBodyTag, and standardStyleSheets are all attributes on the apex:page tag that let you customize how much of the underlying HTML is abstracted. (You can view more on those attributes here: apex page tag.)
To create a responsive visualforce page, the real question to ask is how would I make a responsive HTML page? There are many ways to do that, and I cannot cover all of them In this answer. Bootstrap is a popular choice, and Salesforce even has an article on integrating it with Visualforce: Bootstrap and Visualforce. Salesforce has their own responsive framework in the Lightning Design System.
To directly answer your questions:
How do I identify a mobile user vs a desktop user? Follow the same directions that you would for a traditional HTML page. Determine the solution you wish to use, include the necessary files, and customize for your implementation.
How do I publish the correct content to a user based on mobile vs desktop? I'm assuming you are talking about mobile vs desktop CSS? Again, this is dependent on the responsive solution you choose. If you use Bootstrap, the resources should be the same, and the your page will respond to the screen size with the same CSS. I cannot speak for other solutions. For help including a CSS and JS in a Visualforce page, you'll want to investigate the apex:includeScript and apex:styleSheet tags. You can also use traditional HTML link and script tags.
