As far as I am aware there is a fundamental difference between pixel (px) and screen size. A 20inch monitor could have the same px as a 5inch mobile phone.

I have looked at various websites on both large and small screens and it appears on my mobile phone, on certain sites, everything is visable as it is on a large desktop screen but its really small and zoomed out.

When a window is contracted on a desktop monitor I am guessing the px or resolution does not change only the screen size (e.g from 20 inch to 10 inch) changes so why doesn't the web page display as it does on a mobile screen i.e. small and zoomed out? Instead on the desktop monitor when the window is contracted bits of the web page go missing but surely everything should be the same, but only smaller, because the resolution is not changing even though the screen size is.

Any help on this would be great.

Edited September 3, 201412 yr by raydon

A link to the site/ page in question would be helpful

Sorry. www.cooltoad.com

Have you tried viewing the site on multiple mobile browsers?

 

Try inserting this meta tag in the head of the site

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

I can't actually change the meta tag from the browser on my phone. What would happen if I did change it to that out of interest?

I can't actually change the meta tag from the browser on my phone. What would happen if I did change it to that out of interest?

PC-browsers will render the pages without scaling by default.

Most handheld devices scales a website so that the width matches the viewport.

A developer can disable this behavior by specifying a scale value with the viewport meta tag.

This is needed when you develop layouts that changes depending on screen resolutions (responsive designs).

As a user you can not enable or disable a viewport meta tag (as far as I know) but zooming in and out will do the same.

Thanks a lot for you responses. This is extremely helpful.

 

 

PC-browsers will render the pages without scaling by default.

Most handheld devices scales a website so that the width matches the viewport.

A developer can disable this behavior by specifying a scale value with the viewport meta tag.

This is needed when you develop layouts that changes depending on screen resolutions (responsive designs).

As a user you can not enable or disable a viewport meta tag (as far as I know) but zooming in and out will do the same.

 

So in summary what you are saying is the mobile browser has a meta tag in there that can zoom the web page right out if it's a standard web page with no responsive layout. Is that correct?

Thanks a lot for you responses. This is extremely helpful.

 

 

 

So in summary what you are saying is the mobile browser has a meta tag in there that can zoom the web page right out if it's a standard web page with no responsive layout. Is that correct?

Not really. Tags can be in web documents not in devices. Mobile browsers has a default display mode where the content gets zoomed to mach the width of the device's screen. But this display mode can be overridden if a viewport meta tag is specified in the document.

EDIT: The meta tag is simply a part of the HTML code that instructs the browser how to scale the content just like you can specify what language or charset the the document should be interpreted with.

Edited September 3, 201412 yr by Nillervision

Oh I see. So if you were to remove that particular meta tag from the html code of the example website the browser would not zoom out and it would be distorted. If the resolution of both desktop monitor and th mobile screen were the same in resolution the meta tag would not be required, is that right?