Изменение размера текста в зависимости от устройства - PullRequest
Новая
       0

Изменение размера текста в зависимости от устройства

0 голосов
/ 19 июня 2020

Мне нужно создать код, который изменяет размер текста, когда пользователь использует мобильное устройство. Мой код: 

if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|   Opera Mini/i.test(navigator.userAgent)) {
  document.getElementById("link").style["font-size"] = "120%";
}

Он не работает, но я не могу понять, в чем проблема

Ответы [ 2 ]

0 голосов
/ 19 июня 2020

Вы имеете в виду «Отзывчивый текст!». Вот простое решение, которое

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

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>

<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>


</body>
</html>
0 голосов
/ 19 июня 2020

Как кто-то прокомментировал ваш вопрос, вам может быть лучше использовать Media Queries для проверки размера экрана устройства: 

@media only screen and (max-width: 500px) {
  p {
    font-size: 0.5rem;
  }
  
  h1 {
    color: blue;
  }
}
<h1> My Paragraph </h1>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod excepturi maiores saepe maxime dolores debitis eos sint quidem, enim consequatur. </p>

Попробуйте открыть этот код в полноэкранном браузере, а затем уменьшите размер окна. Какой бы стиль CSS вы ни добавили в этот медиа-запрос, он будет применяться всякий раз, когда размер экрана составляет 500 пикселей или меньше.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...