1

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 with support of javascript and css to build the website

Nithin
  • 6,435
  • 5
  • 43
  • 56

2 Answers2

6

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.

Joey
  • 344,408
  • 85
  • 689
  • 683
  • The iPhone doesn’t render handheld stylesheets, but you can target stylesheets at just the iPhone too: http://stackoverflow.com/questions/809532/how-do-i-apply-a-stylesheet-just-to-the-iphone-and-not-ie-without-browser-snif – Paul D. Waite Jan 13 '10 at 10:13
  • actaually, i need the contents to be given inside the foo_mobile.css file. What are the things we need to specify there. If these are poor basics, pls excuse me, i'm a newbie to the web development field. – Nithin Jan 13 '10 at 10:24
  • Nithin, the obvious candidates should be font size adjustments (`font-size: smaller`), removing un-necessary stuff that just takes away space (`display: none`), not using multiple columns, etc. Since we don't know how your page/site and stylesheets looks like we can't really give you much more than general advice. If you have specific questions, then you should ask them as such. – Joey Jan 13 '10 at 10:29
0

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.

SpliFF
  • 38,186
  • 16
  • 91
  • 120
  • Well, controlling font size through the vieport's size is probably not the smartest idea, though. And I think most site layouts need to be re-done for very small screens anyway instead of just scaled down. – Joey Jan 13 '10 at 17:35