Отзывчивость - Как управлять масштабом и компоновкой дисплея ПК с помощью CSS? - PullRequest
Новая
       20

Отзывчивость - Как управлять масштабом и компоновкой дисплея ПК с помощью CSS?

0 голосов
/ 19 декабря 2018

До сих пор, когда я пытался создать адаптивные веб-сайты, я всегда использовал медиа-запросы для управления разрешением экрана.Однако, хотя большинство экранов ПК имеют 100% масштаб, многие ноутбуки имеют 125% или даже 150%.Есть ли способ добавить атрибуты CSS, предназначенные только для тех, у кого отображение по 150% шкале?

Ответы [ 3 ]

0 голосов
/ 19 декабря 2018

Нет опции для управления уровнем масштабирования в браузере с помощью кода, но мобильные устройства могут ограничивать параметры масштабирования, используя метатег ниже. 

<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
0 голосов
/ 19 декабря 2018

Вы, вероятно, могли бы сделать это с некоторыми JS, но это, вероятно, будет тонна пользовательского кодирования крайнего случая.Другой подход будет использовать viewport единиц.Таким образом, вы можете гарантировать, что все ваши пользователи получат одинаковый опыт, независимо от того, насколько велики или малы его разрешения.

Извлеките этот пример кода ручки и измените размер экрана / измените отображение, чтобы понять, что я имею в виду

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>
0 голосов
/ 19 декабря 2018

Используйте эту мету. 

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