Как убрать размытие при использовании transform: scale(2)?

Question

[Надим]

Попросили сделать версию сайта для слабовидящих.

Попробовал запихнуть сайт во фрейм и увеличить сам фрейм при помощи CSS:

iframe {
    width: 50%;
    height: 50%;
    transform: scale(2);
    transform-origin: left top;
}

Масштаб меняется, тут без вопросов, но появляется размытие на всех элементах, особенно на шрифтах. Существуют ли способы побороть это размытие? Или какие-нибудь иные способы увеличить масштаб сайта? Может есть какие-нибудь хитрые решения на Canvas для рендеринга версии для слабовидящих? Универсальная цифровая лупа, например?

Comments

[Ankhena]

scale(2)

Это неудачный подход и будет горизонтальная полоса прокрутки, которая всё испортит.

Нужно отталкиваться от размера шрифта.
Делать это можно разными способами.

Но не забывайте, что если на сайте было 3 колонки: 20%, 60% и 20%, то они либо такими и должны остаться либо адекватно перестроится. Если их ширину поставите в зависимость от шрифта, то снова выйдет ерунда.
На сайте найдутся блоки требующие индивидуального подхода. Какие-нибудь формы и подобное.

[Надим]

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

[Алекс Глебов]

https://bvi.isvek.ru/

Answer 1

[jamtuson]

Охх и извращения.
Используйте rem вместо пикселей. Версия для слабовидящих будет скейлиться благодаря увеличению font-size для html

Comments

[Надим]

Верстка на сайте хоть адаптивная, но пределы этой адаптивности привязаны жестко к конкретным font-size. Если поменять размеры шрифтов, все медиазапросы полетят к чертям.

[jamtuson]

Надим Закиров, можно все перевести в rem. А так через iframe + transform не добиться нормального отображения.

[Надим]

jamtuson, совет хороший, в будущем наверное буду именно в rem все верстать. Раньше вот как-то не доводилось сталкиваться с необходимостью верстки версии для слабовидящих, соответственно и не думал никогда подкладывать себе соломки на будущее.

Answer 2

[Сергей]

Я думаю вам поможет js плагин адаптирующий сайт под слабовидящих
Очень легко подключить и настроить, еще ни разу проблем с ним не было)