최근에 저는 외부 네이티브 및 내부 webview 중첩 H5 페이지가 있는 하이브리드 개발인 webapp 프로젝트를 진행했습니다. 프론트엔드는 vue를 사용하여 개발하고, Adaptive는flexible+rem을 사용하여 만들어졌습니다. 원래 모든 것이 괜찮았지만 리더는 고객 중 일부가 나이가 많아 글꼴을 명확하게 볼 수 없으며 웹 글꼴이 시스템 글꼴 크기 변경을 따를 수 있기를 바랐다고 말했습니다. 그 당시에는 정말... 그런데 문제를 해결할 수 있는 방법을 찾을 수밖에 없었고, 인터넷을 뒤져보니 내부적으로는 시스템 글꼴 크기 변경을 따르는 것이 금지되어 있는 것 같았습니다. 나는 그것을 직접해야만했다.
첫 번째 옵션가장 간단한 방법은 기본 시스템이 내부적으로 아무런 통제 없이 작동하고, 외부적으로 증폭되고, 내부적으로 적응되도록 하는 것입니다. 다만, 텍스트 글꼴을 확대할 수는 있지만 일부 입력 상자와 입력 상자의 내용이 확대되지 않는 문제가 있으므로 이 해결 방법은 제거됩니다.
두 번째 옵션외부 네이티브 웹뷰는 시스템 변화를 따르지 않고 내부의 확대/축소를 허용하며 자체적으로 내부적으로 제어됩니다. 그는 Android 동료들과 논의한 후 시스템 확대/축소 매개변수를 얻은 다음 매개변수를 내부 웹앱에 전달하고 내부적으로 확대/축소를 맞춤설정했습니다.
코드는 다음과 같습니다:
setScaleFont(){ letfontScale=1; let initFontSize;fontScale=parseFloat(window._nativeMe.getFontScale()) console.log(`Scale: ${fontScale}`); )[0]; initFontSize=this.getStyle(docHtml,'fontSize').split('px')[0]; scaleFontSize=fontScale*initFontSize;//1-1.4 비례 배율 docHtml.style.fontSize=scaleFontSize +'px' } , getStyle(obj, 이름){ if(window.currentStyle){ 반환 obj.currentStyle[이름]; } else{ return getCompulatedStyle(obj, false)[이름] }먼저 초기 크기 조정 비율을 얻은 다음 Android에서 전달한 기본 크기 조정 비율에 따라 html 태그에 글꼴 크기 크기를 다시 작성합니다. rem 적응 사용으로 인해 루트 요소의 크기에 따라 조정됩니다. 이 솔루션은 먼저 유연한 적응이 실행되는지 확인한 다음 Android인지 확인해야 합니다. Android인 경우 setScaleFont 메서드를 실행해야 유효합니다. 그렇지 않으면 유연한 메서드로 덮어쓰게 되어 페이지가 확대됩니다. 그런 다음 증폭 현상이 먼저 감소하거나 감소합니다.
위 그림과 같이 이 코드를 주석 처리하였습니다. 그렇지 않으면 위에서 언급한 확대, 축소 현상이 발생하게 됩니다.
결론적으로이 방법은 안드로이드에서만 유효합니다. Apple에서는 보안 권한 문제로 인해 시스템 글꼴의 크기 조정 비율을 얻을 수 없으므로 Apple에서 작동하는 방법을 아시거나 다른 더 좋은 방법이 있으면 알려 주시기 바랍니다. 정말 감사합니다.
위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.