Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

mobile

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.

like image 790
mdivk Avatar asked Jun 20 '12 20:06

mdivk


1 Answers

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.

like image 96
kremalicious Avatar answered Oct 13 '22 02:10

kremalicious