How browser auto resize website to mobile browse?

Question

I created a website without using mobile theme. If i open my website in my smart phone browser, it resizing my theme. I mean, It automatically reduce the size to my mobile browser. For example...I already mention my text box size in my CSS code. The mobile screen pixel size is differ from desktop machine screen pixel size.

My Question is, how it reduce the screen resolution to mobile view? please clear my doubt.

Thanks in advance.

Answer 1

Either there might be some media queries defined within your stylesheet like

@media handheld, only screen and (max-width: 1024px) 
{
    //Style goes here
}

Which is a style defined for screens having maximum width of 1024px.

Another possibility is, styles may be defined fully in percentage. So that the styles are changed according to the window size.

Again there might be some scripts used in your code to resize. All depends on the code that you are using. There are variety of methods which fits the view according to the screen size.

Answer 2

Do you mean to resize your sites content for the handheld device? If you have a fluid layout (with % instead of pixels for widths) use:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Further reading: http://developer.android.com/guide/webapps/targeting.html

Answer 3

if you want scale it in browser tell it in css.And use all width in % values

eg:

 @media handheld, only screen and (max-width: 767px) {
 //mobile version css

  }