Недавно я работал над проектом веб-приложения, который представляет собой гибридную разработку с внешними собственными и внутренними вложенными страницами веб-просмотра H5. Фронтенд разработан с использованием vue, адаптация сделана с помощью Flexible+rem. Изначально все было хорошо, но руководитель сказал, что некоторые клиенты были старыми и не могли четко видеть шрифты, и они надеялись, что веб-шрифты смогут следовать за изменениями размера системного шрифта. В то время я действительно был..., но у меня не было другого выбора, кроме как найти способ решения проблемы.Покопавшись в Интернете, я обнаружил, что внутренне запрещено следить за изменением размера системного шрифта. Мне пришлось сделать это самому.
Первый вариантСамый простой способ — позволить собственной системе работать без какого-либо внутреннего контроля, расширяться извне и адаптироваться внутри. Однако есть проблема: шрифт текста можно увеличить, но некоторые поля ввода и содержимое полей ввода не увеличиваются, поэтому это решение исключено.
Второй вариантВнешнее собственное веб-представление позволяет увеличивать и уменьшать масштаб внутри, не следуя за системными изменениями, и контролируется изнутри само по себе. После обсуждения со своими коллегами по Android он получил параметры масштабирования системы, затем передал их во внутреннее веб-приложение и внутренне настроил масштабирование.
Код выглядит следующим образом:
setScaleFont() { let ScaleFontSize; let initFontSize; fontScale = parseFloat(window._nativeMe.getFontScale()); console.log(`Scale: ${fontScale}`); let docHtml=document.getElementsByTagName(html). )[0]; initFontSize=this.getStyle(docHtml,'fontSize').split('px')[0]; ScaleFontSize=fontScale*initFontSize;//1-1.4 пропорциональное масштабирование docHtml.style.fontSize=scaleFontSize +'px' } , getStyle(obj, name){ if(window.currentStyle){ return obj.currentStyle[имя]; } else { return getComputedStyle(obj, false)[name] } };Сначала получите начальный коэффициент масштабирования, а затем перепишите размер шрифта в теге html в соответствии с собственным коэффициентом масштабирования, переданным Android. Благодаря использованию rem-адаптации он будет адаптирован в соответствии с размером корневого элемента. Это решение должно гарантировать, что сначала выполняется гибкая адаптация, а затем определяет, является ли она Android. Если это Android, выполните метод setScaleFont, чтобы он был эффективным. В противном случае он будет перезаписан гибким методом, в результате чего страница станет неактивной. сначала увеличивается, а затем уменьшается или сначала уменьшается. Феномен усиления.
Как показано на рисунке выше, я закомментировал этот код, иначе возникло бы вышеупомянутое явление увеличения и уменьшения масштаба.
в заключениеЭтот метод эффективен только на Android. Apple не может получить коэффициент масштабирования системного шрифта из-за проблем с разрешениями безопасности, поэтому его нельзя настроить. Если кто-нибудь знает, как использовать его в Apple, или имеет другие лучшие методы, дайте мне знать. Спасибо.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.