Media queries. help/discuss

Hello everyone.

so ive been thinking of messing around with trying to get one of my current websites to be more mobile friendly. admittedly, most of the people who will see it are on iphones and droids etc…

so as it stands its either

A. making ONE site, and using media queries to detect device used, then apply the style.

or

b. make two sites, the regular one and a mobile one.

ofcourse A seems the way to go…B, is a bit more involved but…i didnt design my site to be played with in multiple css files so…B it is.

with that said, as i do my research, its led me to primarily “MEDIA QUERIES” VIA the head tag declaration, the HTTP user agent…server side one…(im scared of that one) lols
and

ive read alot about the perils of both…but then, as im about to begin my mobile journey, i came across this, which is to be insterted inbetween the head tags.( js.)(size was just to test, will be lower later on lol )

if (screen.width<=800||screen.height<=600) //if 800x600
window.location.replace("website here.html")

now i put it to the test here.
http://somdowprod.net/4testing/index1

if you go to this site on a reg and on a mobile (tested on iphone 4/3gs/some droid that a friend has/ and a blackberry)

and all see what i want them to.

my ? is, amongst my professional peers, what do you guys use and, is it okay in todays world, and me targeting PRIMARILY smart phone users (u know with big screen) to use what i have above?

tips, discussions etc…are all welcome.

thanks in advance.