CODEWITHSUNDEEP
cssmobile
Dandy
Dandy

Reputation: 979

CSS mobile website - why so high values?

To fit my WP website for mobiles I use

@media screen and (max-device-width: 780px) {}

However, to fit everything properly I have to use giant values, like font-size: 4em;, header {height: 200px;} (when it's 100 on the desktop version). Is it normal?

The main problem is with Gallery plugin - by default thumbs have size e.g. 200x300, and on the mobile version they are really tiny!

Or maybe there is a better way to make a website mobile?

Upvotes: 0

Views: 34

Answers (1)

Liftoff
Liftoff

Reputation: 25392

If I had to guess, I'd say you are not setting your viewport

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

Nowadays, most mobile phones have a very high dpi; for instance, the iphone 6 plus has a full 1080p display, so when you make something 100px tall, it is only 1/19 of the screen height.

By setting the viewport to the device-width, you are telling the browser to render the page using a more standard dpi (for instance, the iphone 6 would be something like 424x600ish). That way, all of your content automatically scales.

Upvotes: 1

Related Questions