4

I would like to change the scale of my website to 0.7 or similar depending on the width of the device used.

The only helpful information I could find so far is the following <meta> tag:

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

I was wondering if it is possible to write some code like the below one to apply a certain scale of the website only if the width of the device matches a certain width or width range:

@media screen and (min-device-width : 320px) and (max-device-width : 480px) { .body { initial-scale: 0.7; } }

Or am I talking total non-sense? Sorry, I am new to CSS and HTML and just looking for a quick workaround to decrease the initial-scale on a laptop screen from 1.0 to 0.7.

Your answers will be highly welcomed. Thanks a lot in advance!

Best,

Pascal

Improve this question
1

4 Answers 4

Reset to default
3

Whenever I write a html code, I make use of the below line:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

Now let's understand what this means:

initial scale: controls the zoom level when the page is first loaded. This takes the original pixelation on the device screen.

maximum scale: defines how much after the initial scale a user can zoom in.

minimum scale: defines how much after the initial scale a user can zoom out.

User Scalable = 0 means a user cannot zoom-in or zoom out.

By writing the above line as a meta tag we keep everything to: No zoom set, user cannot zoom.

Now we can set the scale to 0.7 as well and accordingly the other 3 values if we want to.

But the standard way to write is as mentioned above.

Media queries would come into picture when after a breaking point (in case of mobile devices) we want the elements to change its orientation and how they would be arranged on the screen (responsive) without changing code structure/design.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Thanks for your answer. Could you again post the line of code that you are referring to. I can't see it. Thanks!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
Thanks! I was wondering whether I could add the following to my website: <meta name="viewport" content="width=min-width=901px", initial-scale=1, maximum-scale=1, user-scalable=0">
First of all there are typo errors in the line: <meta name="viewport" content="width=min-width=901px, initial-scale=1, maximum-scale=1, user-scalable=0"> Now coming to your question, when you say min width = 901px, remember that when you will open it on the mobile devices (which obviously has much lesser width) your page will load with 901px because that is the "minimum" viewport you have set. Then you will have to use the scroll bar left and right to view the page details. So better idea would be to go with the "device-width"
And again when overflow would be hidden you cannot even scroll it. So the combinations you are trying code-writing wise it is correct but when you will see the result on different viewports/devices it will have lots of issues.
|
1

Simply apply some additional css in media-queries to overwrite default css (it's proper way to use media-queries):

.some-class { font-size: 16px; padding: 10px; } @media (max-width: 480px) { .some-class { font-size: 13px; padding: 7px; } }
Improve this answer

1 Comment

Thanks for the example. I know somehow to apply media-quries. I am just looking for a way to scale the website differently based on different device widths.
0

You should be able to do something like 

@-ms-viewport{ width: device-width; initial-scale: 1; maximum-scale: 1; user-scalable: 0; }
Improve this answer

Comments

-1

You may also add "!important" to your code block like below to make sure it takes desired value

.some-class { font-size: 16px; padding: 10px; } @media (max-width: 480px) { .some-class { font-size: 13px!important; padding: 7px!important; } }
Improve this answer

1 Comment

using !important in css is a bad practice.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.