13

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.

Improve this question
1

2 Answers 2

Reset to default
25

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:

<meta name="viewport" content="width=device-width">

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.

Improve this answer
3
  • 1
    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
    Commented Jun 20, 2012 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
    Commented Jun 20, 2012 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
    Commented Jun 21, 2012 at 1:13
0

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

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.