CODEWITHSUNDEEP
cssmobileresponsive-designfont-size
Greg McGrath
Greg McGrath

Reputation: 537

Responsive Text Size with a Constant Pixel Font-Size?

On a site like the mobile version of https://www.gofundme.com/, the text size is responsive, but the active font-sizestays at a constant value, like 34px.

Here's the same view on different screen sizes.

As I change a window's size, the sizing of the site's text stays proportional to the screen size. The words that appear on the second line when the screen is 500px are still on the second line even when the screen width is drastically different (200px vs 2000px). The relative distance from the last letter to the right screen edge is identical on all screen sizes.

Because the font-size is in pixels, I expect the word placement to depend on the screen size, but this doesn't appear to be the case on gofundme.com.

How is this being done?

Upvotes: 0

Views: 225

Answers (1)

t-jam
t-jam

Reputation: 800

I believe this is due to a fixed viewport size specified in the <head>:

<meta name="viewport" content="width=640, user-scalable=no">

This results in the entire page scaling to fit the device (maintaining proportions for a 640px wide viewport), rather than individual content elements resizing and moving.

Upvotes: 1

Related Questions