Mobile UI tips & advice needed

So I have a website and I want to make a UI unique to mobiles due to my sites large width and I have some questions.:
1 - I’ve thought about using the

<link rel="stylesheet" media="screen and (max-device-width: 800px)" href="ssmobile.css"/>

method to attach a seperate CSS but is there a better/easier way to attached a different css stylesheet on mobile devices only?
2 - What’s the best way to have mobile specific JQuery code?
3 - What is the maximum and average screensize of a mobile at the moment?
4 - What’s the best way to emulate a mobile on a desktop so I can see how the edited mobile CSS & JQuery code works without having to upload it for every change and test it on my mobile?

If anyone could answer or advise on those questions I would be very grateful as this is my first time stepping into the world of Multiple CSS & device/screen size specific JQuery and I’m slightly daughtened, I know what I want it to look like and function and I know how to program that but its just attaching the css and specifc jquery code I’m concerned with and how to test it.


Rarely is a separate mobile site the way to go unless you are a large company with lots of money to spend and plenty of time on your hands. Responsive (RWD) is the way I would go about this.

I answered most of your questions in a similar thread so read that one first and then come back and ask for clarification if there’s anything you don’t understand. :slight_smile: