Как заставить html кнопок и полей ввода хорошо масштабироваться между мобильным телефоном и ноутбуком?

Question

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

Я пробовал поиграть с размером шрифта, высотой, шириной и т. Д. c коробки, но безрезультатно.

Как это выглядит на мобильном телефоне:

      .toLowerCase ():  Напишите что-нибудь в поле ввода ниже убедитесь, что оно содержит хотя бы одну заглавную букву, а затем нажмите кнопку и посмотрите JS magi c begin!  Введите в поле ввода ниже: 

 пусть строка = 
 string.toLowerCase ()   возвращает: