How to resize html pages on mobile phones

Question

I am new to HTML and CSS development. I have created a html which looks fine on PC web browser.

However, when I use my Android cell phone browser to view it, since the cell phone screen is too small, there is a lot of sliding needs to be done to locate the area I want to bring into focus.

My webpage only has an index table in the center, while left and right of the body are all blank. I was thinking if there is any way to detect the browser to see if it is from a mobile device, then resize the body of the page?

Any advice is welcomed. Thanks in advance.

Solution 1

It is either:

1. you should take a look and learn at some responsive website code like this one.

2. Try to add this code after your opening head tag <meta content='width=device-width, initial-scale=1' name='viewport'/> if you don't want horizontal scrollbar on smaller screens.

Solution 2

The most popular method today is to use a CSS media query. Any code inside a media query will only apply to the parameters specified. This usually applies to height and width of the browser but it can also work for printed stylesheets, display resolution, and a few other things.

Heres an example that targets browser widths between 320px and 480px, common sizes for smartphones.

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  body {
    background: #999;
    width: 100%;
  }
}

You can find more examples here: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Comments

[Keith M]

Awesome! Even 2 years later this just really helped me :)