Take the 2-minute tour ×

Is there a simple way to make an HTML page automatically adjust for mobile phone users? My page: http://www.xiexianhui.com/baxjoomla15/index0.html apparently doesn't fit into my sony xperia ray phone.

share|improve this question
possible duplicate of Responsive layout tutorial? –  Diodeus Jun 20 '12 at 20:54

3 Answers 3

up vote 5 down vote accepted

You should first take a look at the concepts of Responsive Web Design. There's just too much and this question is too generic to answer everything. But in a nutshell it requires 3 components:

  1. Media queries, to deliver different css styles to different screen sizes.
  2. Fluid css grid, so the site's layout adapts automatically to the screen's size.
  3. Flexible images, so all images scale down fluidly so they don't overlap the content container.

If you just want to have your site render in full on the phone's screen you would have to use the viewport meta tag. Put this in the <head> of your page:


and your page will fully fit the screen. But you'll notice now everything is exceptionally small and not usable. Responsive web design is the solution for that.

share|improve this answer
Hmmm, sorry for the question that might sound naive to you. I added the meta info as you instructed and uploaded the new file to the server, the link xiexianhui.com/baxjoomla15/index0.html still doesn't work for my cell, does it work for your cell or ipad? Thanks. –  mdivk Jun 20 '12 at 21:15
You are using a table based layout. Almost nothing disussed in my or other's answers will work with that. The web design community stopped using table based layouts and fully commited to css based layouts somewhere around 2003/2004, depending on how you look at it. And, tables by side, you're positioning your main #content container as absolute. This too makes all suggestions in this thread not working –  kremalicious Jun 20 '12 at 21:22
Thank you for this, I am not good at html, could you shed me more light on how to create this page? All I need is to make tile page like WIN 8 tile, since it looks like a table, I created a table to mock up it. It would be much appreciated if you can create a sample page for me. Thank you in advance. –  mdivk Jun 21 '12 at 1:13

To piggy-back on what's already been said: WURFL, http://wurfl.sourceforge.net/, the Wireless Universal Resource FiLe, is a Device Description Repository (DDR), i.e. a software component that maps HTTP Request headers to the profile of the HTTP client (Desktop, Mobile Device, Tablet, etc.) that issued the request.

One shortcut: Prepare 3 different layouts that will cover basic old phones, new colorful phones and the high-level features phones and PDA's. This is a fairly simple task and at the same time offers great results. I'd give this link a look as well. http://mobiforge.com/developing/story/introduction-wurfl

share|improve this answer
Thank you, I will take a look later on, it doesn't seem to be a 5 minute work to me though. –  mdivk Jun 21 '12 at 1:10

Perhaps take a look at this post: http://woork.blogspot.co.uk/2008/07/tips-to-design-your-site-for-mobile.html

share|improve this answer
This is a post from 2008. Current best practices like repsonsive web design weren't invented back then –  kremalicious Jun 20 '12 at 21:00

Your Answer


