What is the best way to get XWiki to use a different skin depending on the device?
The best solution here would be not only to adapt the CSS in the mobile version (not to be confused with the responsive view) using media queries, but also to use different velocity files.
The full editing scope should not be available for the mobile version. The focus in the mobile version should be on the content. There may even be content specifically for the mobile version or existing content may be rewritten for the mobile version.
It should still be a pure browser/web version and not a native version.
Smaller collaborative inputs (such as ratings or feedback) should be possible.
What I have in mind here is a small piece of javascript on the client side that analyzes the browser and resolution and then makes XWiki use different skins depending on it.
Does anyone have experience or best practices on how to start and achieve this?
To make it easier, you should inherit from an existing skin and override the templates you need. In these overrides, you’ll need some “IF” conditions to decide what velocity to execute based on whether it’s executing on a mobile or not (you can probably do this by checking the user-agent in the request (see for example javascript - Java Servlets - How do I detect if a user is from a mobile device? - Stack Overflow).
If I want to create a completely new, file-based skin (e.g. with the name SimpleSkin) in the directory “~\webapps\xwiki\skins\SimpleSkin” (this is better for e.g. GIT) and assign it to a specific user, I can only use it as a preview via the URL parameter “skin=SimpleSkin”.
However, overwriting an existing skin via the GUI and assigning it to the user works without any problems.
I proceed according to the following instructions: https://www.xwiki.org/xwiki/bin/view/Documentation/DevGuide/Tutorials/Skins/#HHowtocreateanewSkin
Are there any known pitfalls or undocumented issues?
I use XWiki version=15.10.5 and the default skin flamingo