1

I know this is a bad practice but I need to know how to make a full website scale down on smaller devices so they have to zoom in. Like this website: http://gamekeeperinn.co.uk/

I managed to partly do this by removing;

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

But my text doesn't scale with the rest of the website. Do you know how they have achieved this affect?

Reece
  • 2,581
  • 10
  • 42
  • 90
  • css can be set to a certain size `12px`, which makes it fixed, or make it scale, like using `em` . check here for more info: https://css-tricks.com/almanac/properties/f/font-size/ – Dorvalla Aug 22 '18 at 11:09
  • Not sure if that will help. If you look at the heading on the home page it says it's 20px but if you inspect and select a preset mobile size you can see it has shrunk but is still defined as 20px. How can I do this? – Reece Aug 22 '18 at 11:19
  • it can be done by removing all 'rem' and 'em' based styling. and ofcourse you have deleted the meta viewport tag. Also make sure no css is based on percentages and everything is 'hard-coded' in 'px' values. in short you would want to follow all 'bad' css practices – Divneet Aug 22 '18 at 12:05
  • Possible duplicate of [Scale website to mobile devices](https://stackoverflow.com/questions/41432759/scale-website-to-mobile-devices) – l2aelba Aug 22 '18 at 12:50

1 Answers1

1

Correct me if im wrong, but this is what i came up with the text scaling using vh css unit, and i will demonstrate it with a html.

HTML:

 <div> <h1>test</h1> </div>
 <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do    
     eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
     ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
     aliquip ex ea commodo consequat. Duis aute irure dolor in 
     reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
     pariatur.
 </p>

CSS:

body{
    margin: 10vh;
    padding: 5vh;
    background-image: url(https://img.freepik.com/free-vector/wrinkled-paper-texture_1100-12.jpg?size=338&ext=jpg);
}

h1{
    text-align: center;
    font-family: arial;
    font-size: 3vh;
}

p{
    text-align: center;
    text-align: justify;
    position: sticky;
    font-size:3vh;
    color: red;
}

even if you zoom out or in, the text will also scales with your view.

Stefan Ferdinand
  • 11
  • 4