Oh, because I generally like to answer the question presented (even if I disagree with the premise).
Be careful exactly how you load content. For example, if a style sheet loads which contains images to load, even if those images are never used, they will still be loaded. So while you think you are reducing what is loading on the page, you may not be. Media queries to block the entire script from loading are probably one of the best methods to avoid this (so be wary of any "common" style sheets and really keep their content limited).
As for HTML content, there are a couple ways of dealing with this:
- Load everything and hide stuff. This is easier to do, but causes larger loads than needed.
- Have the page load an page that sets a cookie, then read that cookie to determine which content to actually send. This method can usually work well, though has quite a few contingencies (and an extra redirect, which can be bothersome on high-ping mobile devices)
- Have a mobile site. This one is very very similar to the second (so I prefer the second), but you can have a completely separate site and redirect mobile users to it.
However, like I said, I prefer to have all of the HTML content load regardless of platform, then deal with it in a platform appropriate manner.