Исследование проблемы увеличения шрифта на мобильных терминалах

Эта статья одновременно публикуется в блоге команды веб-разработчиков Futu.Изображение.im/статья/шаблон…

фон проблемы

Многие веб-просмотры предоставляют функцию настройки размера шрифта страницы, например мобильный QQ, WeChat, некоторые встроенные браузеры Android и т. д. Настройка шрифта в большинстве браузеров приведет только к изменению размера отображаемого шрифта, но не повлияет на размер других элементов. Однако для страниц с немного более сложной структурой изменения размера шрифта достаточно, чтобы испортить макет страницы, что приведет к таким проблемам, как нецентрированный текст, перенос текста и путаница макета.

24-mobile-browser-font-size/1.png)

Как фронтенд-инженер, я чувствую себя очень невинно, когда страница испорчена.Это, очевидно, ваш собственный увеличенный шрифт, но вы должны нести последствия грязной верстки.Какое недовольство. Давным-давно на стороне ПК мы все еще могли предложить пользователю нажать CTLR + 0, чтобы отрегулировать масштаб страницы назад, но теперь на мобильной стороне трудно запретить пользователю масштабировать размер шрифта.

Однако, даже если нас обижают, нам все равно нужно решать проблему, когда она возникает.Кто сделал нас фронтенд-инженерами? (смех)

принцип

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

iOS

Когда вам нужно настроить размер шрифта веб-просмотра на iOS, он устанавливается путем установки тела-webkit-text-size-adjustРеализованы свойства:

В этом случае мы должны получить это свойство через JS:

var body = document.body;
alert(body.getAttribute('style'));

Как видно из рисунка, при увеличении текста страницы действительно появляется еще один-webkit-text-size-adjustАтрибуты.

Android

Android делает это, устанавливая масштабирование шрифта для веб-просмотра. Конкретный APIsetTextZoom(int).

Давайте посмотрим на эффект через демо-страницу:

Как видно на картинке, текст действительно увеличен. Например, текст "размер текста 10px" увеличивается в два раза, а вместе с текстом увеличиваетсяemразмер блока иline-height.

Поэтому естественно подумать, можем ли мы получить эти свойства?

// 取元素的fontSize
document.querySelector('.s10').style.fontSize;

Результат очень разочаровал, никакой полезной информации получено не было.

По способу iOS никаких полезных стилей получить не удается, видно, что Android webview не используется.-webkit-text-size-adjustЭто свойство используется для увеличения текста.

Когда я был в растерянности, я вдруг подумал о том, стоит ли брать егоcomputedStyle?

window.getComputedStyle(document.querySelector('.fs10'),null).getPropertyValue('font-size')

На этот раз я, наконец, получил результат: текст «размер текста 10 пикселей» явно использовался.20pxразмер текста!

На этом этапе мы можем примерно предположить принцип увеличения текста в веб-браузере Android: после парсинга CSS и перед рендерингом все значения размера шрифта масштабируются, а последующая верстка и рендеринг будут напрямую использовать масштабированные значения CSS.

решение

Для iOS регулировка размера шрифта сама по себе просто меняетсяbodycss, поэтому им можно управлять, переопределяя стили.

body {
    -webkit-text-size-adjust: 100% !important;
}

Поскольку Android изменяет размер шрифта, вы можете рассмотреть возможность пропорционального уменьшения размера шрифта при его настройке. Например, текст должен начинаться с10pxДля рендеринга, когда веб-просмотр увеличивается в два раза, в это времяfont-sizeстанет20px. Следовательно, мы можем пропорционально уменьшить исходный стиль после взятия этого коэффициента увеличения, например, установить исходный размер текста на5px, при рендеринге становится10px.

var $dom = document.querySelector('.fs10');
var originFontSize = 10;
var scaledFontSize = parseInt(window.getComputedStyle($dom, null).getPropertyValue('font-size'));
var scaleFactor = originFontSize / scaledFontSize;
$dom.style.fontSize = originFontSize * scaleFactor;

Но есть еще несколько проблем с этим:

1. Одновременно можно манипулировать только одним элементом DOM, пакетная обработка невозможна.
2. Необходимо знать размер шрифта, изначально установленный в элементе DOM.

Эти проблемы не так легко решить, как кажется. Так что используйте другой подход и посмотрите, есть ли способ сделать это раз и навсегда. В голове быстро всплыло существительное —rem!

Если размер шрифта нашей страницы используетсяremСделайте заявление, тогда нам нужно только рассчитать его в соответствии с коэффициентом масштабирования при загрузке страницы.htmlРазмер шрифта элемента в порядке! Подробности смотрите в приведенном ниже коде:

(function(){
    var $dom = document.createElement('div');
    $dom.style = 'font-size:10px;';
    document.body.appendChild($dom);
    // 计算出放大后的字体
    var scaledFontSize = parseInt(window.getComputedStyle($dom, null).getPropertyValue('font-size'));
    document.body.removeChild($dom);
    // 计算原字体和放大后字体的比例
    var scaleFactor = 10 / scaledFontSize;
    
    // 取html元素的字体大小
    // 注意，这个大小也经过缩放了
    // 所以下方计算的时候 *scaledFontSize是原来的html字体大小
    // 再次 *scaledFontSize才是我们要设置的大小
    var originRootFontSize = parseInt(window.getComputedStyle(document.documentElement, null).getPropertyValue('font-size'));
    document.documentElement.style.fontSize = originRootFontSize * scaleFactor * scaleFactor + 'px';
})();

Поскольку этот код создает элемент и помещаетdocument.body, поэтому его нельзя поместить вheadвбежать. Если он запускается в конце страницы, это может вызвать мерцание, поэтому лучше всего поместить этот код в<body>когда начать.

В дополнение к веб-просмотру Android приведенный выше код также действителен в Android WeChat.

Другие варианты

Android WeChat

На момент написания этой статьи, благодаря некоторой информации в Интернете, я обнаружил, что в Android WeChat также можно использоватьWeixinJSBridgeобъект, чтобы предотвратить изменение размера шрифта. Эксперимент также допустим.

(function() {
    if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
        handleFontSize();
    } else {
        document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
    }
    function handleFontSize() {
        // 设置网页字体为默认大小
        WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
        // 重写设置网页字体大小的事件
        WeixinJSBridge.on('menu:setfont', function() {
            WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
        });
    }
 })();

Android QQ

Как одно из приложений с большим количеством пользователей, QQ также предоставляет решение для запрета регулировки размера шрифта.В Android qq вы можете настроить элементы управления, отображаемые в веб-просмотре, добавив указанные параметры в URL-адрес. ВидетьКак настроить мобильный QQ Webview.

В теории,www.futu5.com/?_wv=128После перехода по этой ссылке кнопка настройки размера шрифта не появится в меню функций. Но, но, в моем реальном процессе измерения среди всех параметров только [128 скрытый элемент шрифта не действует]. Я не знаю, является ли это ошибкой QQ или это сделано намеренно Я отправил отзыв, но не получил ответа.

голос и мышление

При обмене в группе у всех разное мнение о головной боли настройки размера шрифта, и голосов, наверное, несколько:

1. С точки зрения продукта, поскольку WeChat, QQ и другие клиенты предоставляют функцию настройки шрифтов, они должны использовать ее для улучшения работы и не должны отключаться.
2. С точки зрения разработки, после масштабирования шрифта страница будет испорчена, основная причина в том, что адаптивности страницы недостаточно, и ее нужно оптимизировать на уровне кода.
3. Продолжая с точки зрения разработки, хотя теоретически разработка должна быть хорошо адаптирована, но когда текст внезапно увеличивается в два раза, много раз это действительно слишком. Если это должно быть сделано хорошо, это займет много времени и энергии, и студенты, изучающие дизайн и продукт, должны оставить некоторое пространство для адаптации в дизайне.
4. Поскольку пользователь выбирает просмотр страницы с большими шрифтами, он должен знать, что страница увеличена им самим, и ему нужно смириться с тем, что макет страницы испорчен.

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

Это может быть результатом того, что продукты, дизайн, разработка и боссы более приемлемы для.Это можно сравнить с нагрузкой на большинство веб-сайтов в Китае при безбарьерном просмотре.Это не идеально, но очень беспомощно.

использованная литература

• Как настроить мобильный QQ Webview
• WeChat SDK
• Отключить веб-просмотр WeChat, настроить размер шрифта

TooBug рассмотрел эту статью.