Для PC можно через css: transform:scale. Конечно же, это может быть не до конца удобно в разработке, т. к. когда, Вы, к примеру, берёте картинку размером 1px, по умолчанию у пользователя она будет отображаться другим размером.
Если размеры шрифтов наследуются, то достаточно просто изменить размер шрифта главного родительского элемента, но вряд ли при этом изменятся размеры картинок и другие вещи.
В мобильной версии ничего масштабировать не надо, а лучше всего просто играть размером viewport'а. Узнать, что это мобильная версия, можно проверив ширину страницы — если она совпадает с шириной вьюпорта, то 99%, что это мобильное устройство.
Увеличение ширины вьюпорта сделает масштаб сайта меньше (но только на мобильных устройствах), в итоге страница возможно начнёт помещаться целиком по высоте. Но как побочный эффект, текст может стать слишком мелким и его будет трудно читать.
Решить проблему мелкого текста можно убедившись, что после увеличения масштаба пользователю не приходится крутить текст по горизонтали. К сожалению, вряд ли это будет хорошим решением, т. к. это будет означать, что при увеличении масштаба ширина текста уменьшилась, что, во-первых, очень странно, а во-вторых, может сбивать прокрутку. Насколько я помню, этой проблемы нет на компьютере, а вот на мобильном устройстве есть. Поэтому, если она есть, то оптимальнее просто сразу подобрать ширину вьюпорта или хотя бы ширину текста так, чтобы текст не был мелким изначально.
Средний
