Как увеличить размер шрифта только для настольного устройства

Question

Работая над проектом ASP. Net MVC, я не хочу просто сказать ... в поисках способа обнаружения мобильного / настольного устройства. как на Сайт mozilla , говорят ... ваш первый шаг - попытаться избежать этого, если это возможно. Начните с попытки определить , почему вы хотите это сделать.

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

Первой задачей, которую мне дали, было увеличение размера шрифта для всего веб-сайта, и я сделал это, и он работает хорошо, используя приведенный ниже код

    $(function increaseFont() {
    document.body.style.zoom = "150%"
});

теперь у меня появилось новое требование уменьшить размер до нормального для только для мобильных устройств ... поэтому я подумываю иметь условное , если , до того, как указано выше JS функция для определения, является ли устройство мобильным или настольным.

Есть идеи, пожалуйста?

Answer 1

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

@media only screen and (min-width: 768px) { /* Anything larger than a tablet */
  body {
   font-size: large; /* Increases every font size */
  }
}

Для получения дополнительной информации вы можете посетить W3 Schools Website .

Надежда это помогает.

Answer 2

Вы можете прочитать внутреннюю ширину окна с помощью JavaScript.

Это, вероятно, условие if, которое вы запрашиваете:

if (window.innerWidth > 768) {
   // do stuff for desktop devices
}

Значение в условии if определяет минимальная необходимая ширина (в пикселях) окна просмотра для выполнения кода в его теле.