نموذج تعليمة برمجية لتغيير حجم خط تطبيق الويب ليتوافق مع حجم خط النظام

لقد عملت مؤخرًا على مشروع تطبيق ويب، وهو عبارة عن تطوير مختلط، مع صفحات H5 متداخلة لعرض الويب الأصلي والداخلي. تم تطوير الواجهة الأمامية باستخدام vue، وتم التعديل بواسطة Flex+rem. كان كل شيء على ما يرام في الأصل، لكن القائد قال إن بعض العملاء كانوا كبارًا في السن ولم يتمكنوا من رؤية الخطوط بوضوح، وأعربوا عن أملهم في أن تتمكن خطوط الويب من متابعة التغييرات في حجم خط النظام. في ذلك الوقت، كنت حقًا... ولكن لم يكن لدي خيار سوى إيجاد طريقة لحل المشكلة. وبعد البحث في الإنترنت، وجدت أنه من المحظور متابعة تغييرات حجم خط النظام داخليًا كان علي أن أفعل ذلك بنفسي.

إن أبسط طريقة هي السماح للنظام الأصلي بالعمل دون أي تحكم داخليًا، والتضخيم خارجيًا، والتكيف داخليًا. ومع ذلك، هناك مشكلة في إمكانية تكبير خط النص، ولكن لا يتم تكبير بعض مربعات الإدخال ومحتويات مربعات الإدخال، لذلك يتم التخلص من هذا الحل.

يسمح عرض الويب الأصلي الخارجي بالتكبير والتصغير من الداخل لعدم متابعة تغييرات النظام، ويتم التحكم فيه داخليًا من تلقاء نفسه. بعد المناقشة مع زملائه في Android، حصل على معلمات التكبير/التصغير للنظام، ثم مرر المعلمات إلى تطبيق الويب الداخلي، وقام بتخصيص التكبير/التصغير داخليًا.

الرمز هو كما يلي:

 setScaleFont(){ LetfontScale=1; LetscaleFontSize; )[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[name] } else{ return getComputedStyle(obj, false)[name] } };

احصل أولاً على نسبة القياس الأولية، ثم أعد كتابة حجم الخط على علامة html وفقًا لنسبة القياس الأصلية التي تم تمريرها بواسطة Android. نظرًا لاستخدام تعديل rem، سيتم تكييفه وفقًا لحجم العنصر الجذر. يجب أن يتأكد هذا الحل من تنفيذ التكيف المرن أولاً، ثم تحديد ما إذا كان Android. إذا كان Android، قم بتنفيذ طريقة setScaleFont لتكون فعالة، وإلا فسيتم استبدالها بالطريقة المرنة، مما يؤدي إلى ظهور الصفحة تكبيرها ثم تصغيرها أو تصغيرها أولا ظاهرة التضخيم.

كما هو موضح في الصورة أعلاه، قمت بالتعليق على هذا الكود، وإلا حدثت ظاهرة التكبير والتصغير المذكورة أعلاه.

هذه الطريقة فعالة فقط على نظام Android. لا تستطيع Apple الحصول على نسبة القياس لخط النظام بسبب مشكلات الأذونات الأمنية، لذا لا يمكن تعديلها إذا كان أي شخص يعرف كيفية تشغيلها على Apple أو لديه طرق أخرى أفضل، فيرجى إبلاغي بذلك. شكرا لك.

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.