Responsiveness- How to control PC display's scale and layout with CSS?

user_9941871 0
Viewed 2139

so far when I have been trying to create responsive websites I have always used media queries to control the screen resolutions. However, while most PC screens have 100% on their scale, many laptops are 125% or even 150%. Is there any way to add CSS attributes designated only to those with a 150% scale display?

responsive-design web css
3 Answers

There is no option for Controlling zoom level in a browser by a code, But mobile devices can restrict the zoom options by using below meta tag.

<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
user_82875560

You could probably do that with some JS but it will probably be a ton of custom edge case coding. Another approach would be utilizing viewport units. That way you can ensure all your users will get the same experience no matter how big or small there resolutions are.

Checkout this codepen example and resize the screen/ change the display to see what I mean

https://codepen.io/oneezy/pen/oJYoEG

* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Roboto"; }

/* Styles
***************************/
header { background: black; color: white; display: flex; align-items: center; }
p { opacity: .78; }




/*==============================================                                           
  ####    #####  ##   ##  ##   ####  #####  
  ##  ##  ##     ##   ##  ##  ##     ##     
  ##  ##  #####  ##   ##  ##  ##     #####  
  ##  ##  ##      ## ##   ##  ##     ##     
  ####    #####    ###    ##   ####  #####  
==============================================*/

/* Mobile */
@media (min-width: 0) and (max-width: 768px) { 

 h1 { font-size: 9vw; padding: 2vh 0; }
 h2 { font-size: 7vw; }
 p  { font-size: 4vw; }
}
  
/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) { 

 h1 { font-size: 7vw; padding: 2vh 0; }
 h2 { font-size: 5vw; }
 p  { font-size: 3vw; }
}
  
/* Desktop */
@media (min-width: 1025px) { 

 h1 { font-size: 6vw; padding: 2vh 0; }
 h2 { font-size: 4vw; }
 p  { font-size: 2vw; }
}
<header>
 <h1>Heading</h1>
</header>

<main>
 <article>
  <h2>Title</h2>
  <p>I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. </p>
 </article>
 
 <article>
  <h2>Title</h2>
  <p>I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. </p>
 </article>
 
 <article>
  <h2>Title</h2>
  <p>I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. </p>
 </article>
</main>

user_3012500

Use this meta.

<!–– 150% scale -->
<meta name="viewport" content="width=device-width, initial-scale=1.5"/>
user_107388060
Related