Creating a webpage for mobile browsers

I'm creating a website for mobile users as well as for pc users. I want this website to be viewed properly on both these end users. I'm now basically looking into the part of mobile users. When i load the page on my mobile, it seems to be a way too bit smaller. I need to reduce the whole body size of the page or its resolution to fit the mobile. When i checked the mobile version of google(here), it seems to be smaller in the pc's browser, where as it fits the mobile browser.

What is the method i've to use???I'm using Xhtml w开发者_StackOverflow中文版ith support of javascript and css to build the website

You can easily specify multiple style sheets for different media types:

<link rel="stylesheet" type="text/css" media="handheld" href="foo_mobile.css">
<link rel="stylesheet" type="text/css" media="screen" href="foo_screen.css">

The relevant media types here are probably screen for normal viewing at a computer and handheld.

You can also specify a style sheet with media='all' and then apply specific styles depending on the media type in other style sheets if you don't need to re-style everything.

Consider specifying sizes in relative units like % and em. This way everything scales relative to available screen size. This is a good idea anyway since (without JS) you can't know how big the users browser window is. Use min-width if you want to prevent things (namely fonts) getting too small.

The only real issue with this approach is images, since they look best at their natural sizes. SVG gets around this issue for vector art but using CSS media targets as stated by Johannes can resolve this for mobile as well.