CODEWITHSUNDEEP
htmlmobile
mdivk
mdivk

Reputation: 3727

How can I make my HTML page automatically adjust for mobile users?

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.

Upvotes: 13

Views: 49946

Answers (2)

mistahenry
mistahenry

Reputation: 8734

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

Upvotes: 0

kremalicious
kremalicious

Reputation: 1371

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.

Upvotes: 25

Related Questions