All geek questions in one place

How to make mobile web page not shrink?

When you visit a web page on your phone (I use Android), if its normal page compresses it so that it fits on the screen of your phone.

I always assumed that making a mobile page should make the page small enough to fully match the resolution of the phone screen, without shrinking.

This is not happening. I even specifically set the page size to body{ width: 300px;} , still when I download it to my phone, it is compressed in the upper left corner with a lot of free space around it.

What am I doing wrong?

+6
source share
2 answers

You need to use the viewport meta tag

 <!doctype html> <html> <head> <title>Hello world!</title> <meta name="viewport" content="width=device-width"/> </head> <body> <p>Hello world!</p> </body> </html>

Read more here http://davidbcalhoun.com/2010/viewport-metatag

+9
source

This is because the width of the body is associated with the browser.

Most modern phones mimic a desktop browser, so a width of 300 pixels is 300 pixels in relation to the overall browser window. Basically, you will see the same thing in your desktop browser as in your phone browser.

Ideally, the point is to show something a little different from mobile users. Usually a cut-out version of a page that has larger menu items and hides most of the regular content that is not necessary. (fancy header, etc.).

0
source

Source: https://habr.com/ru/post/895141/

More articles:


All Articles