واجهت مشكلة غريبة في العمل وبعد معاناة طويلة تمكنت من حلها أخيرًا، وهنا أسجل أفكار التحليل وحلولها.
يهدف المشروع إلى إنشاء موقع ويب رسمي سريع الاستجابة للشركة، بعد قص صفحة الصورة الثابتة في المرحلة المبكرة، وتم إرسالها إلى الواجهة الخلفية لاستخدامها كقالب، وقد تركت المشروع بشكل أساسي.
عندما تم تنفيذ الواجهة الخلفية، وجدت أن عرض الصفحة على الجهاز المحمول لم يكن صحيحًا تمامًا وبدا ضبابيًا للغاية. كان الفكر الأول هو أن رأس التعريف مغطى. بعد التحقق من الكود المصدري، وجدت أنه مغطى.
هذا هو رأس التعريف الذي اعتدت استخدامه لجعل عرض الصفحة يتغير بشكل تكيفي وفقًا لعرض الجهاز.
<اسم التعريف = محتوى منفذ العرض = العرض = عرض الجهاز، المقياس الأولي = 1، الحد الأدنى للمقياس = 1.0، الحد الأقصى للمقياس = 1.0، قابل للتحجيم بواسطة المستخدم = لا />
ومع ذلك، يتم تقديم إطار التنفيذ الخلفي مباشرةً وفقًا للنموذج، حتى أن بعض الموارد العامة تتضمن التعريف اللازم لإعداد إطار العرض. يتم تقديم الواجهة الخلفية على النحو التالي:
<اسم التعريف = معرف منفذ العرض = محتوى منفذ العرض = العرض = 640 بكسل، قابل للتحجيم بواسطة المستخدم = لا>
يتم إلحاق هذا الرأس بملف js الذي يجب إضافته، ويُعلم بوضوح أنه لا يمكن تعديل ملف js! لذا فإن هذا الإعداد للعرض الثابت البالغ 640 بكسل يحل محل إعداد التعريف الأصلي الخاص بي والذي يتغير مع عرض الجهاز!
تأتي المشكلة، وقد اكتملت الصفحة الثابتة، وبسبب عوامل الكود التاريخية، لم يستخدم جزء كبير من الكود وحدات rem في البداية، ولم يعد من الممكن تعديل تأثير CSS على نطاق واسع. فقط عن طريق إعادة تعيين عرض إطار العرض من خلال JS يمكن تجاوزه مرة أخرى... هذا بسيط جدًا، لكن الكود قبيح جدًا.
ولكن تظهر مشكلة أخرى. تقدم صفحة الموقع الرسمية هذه أيضًا صفحات iframe بشكل ديناميكي. هذا مدمر للغاية! إذا أضفت تعريفًا يتغير مع عرض الجهاز، فلا يمكن عرض إطارات iframe هذه؛ وإذا لم أقم بإضافة تعريف مرة أخرى، فلا يمكن عرض الموقع الرسمي نفسه!
لحسن الحظ، يتم تقديم إطارات iframe هذه من خلال طريقة موحدة، على الرغم من أنه لا يمكن تغيير ملف js الخاص بطريقة التقديم، إلا أنه لا يزال من الممكن مراقبتها مرة أخرى في كود العمل. لذا، بعد ربط حدث النقر مرة أخرى وتحديد ما إذا كان قد تم تقديم إطار iframe أم لا، فقد حان الوقت لاستخدام بعض الطرق الخاصة!
يحتوي CSS3 على طريقة transform: scale() يمكنها قياس العناصر. على الرغم من عدم تغيير العرض والارتفاع الفعليين للمساحة المشغولة، إلا أن تأثير العرض لا يزال جيدًا.
يمكن الحصول على نسبة القياس المقابلة عن طريق حساب 缩放比例= 设备宽度/ 640 ، ثم ضبط transform: scale(缩放比例) على إطار iframe المقدم لتحقيق تحجيم جميل!
هل هذه نهاية الأمر؟ لا! ليس بعد! يتم تغيير حجم إطار iframe، ولكن يتم قياس الارتفاع أيضًا، ويتم عرض المحتوى بشكل غير كامل. ضبط height: 设备高度/ 缩放比例استعادة ارتفاع iframe الأصلي.
اعتقدت أن الأمر قد انتهى؟ ليس حقيقيًا! لا تزال هناك مشاكل! بعد أن يتم قياس طبقة iframe بواسطة سمة scale() ، فإنها تتحرك أيضًا لمسافة معينة إلى الأسفل وإلى اليمين بشكل افتراضي، وذلك لأن scale() يتم قياسه وفقًا للمركز بشكل افتراضي! تم قضاء الكثير من الوقت هنا للعثور على حلول مناسبة، مثل الهامش السلبي، والترجمة ()، وما إلى ذلك. ومع ذلك، نظرًا لصعوبة حساب معامل النسبة المتحركة المناسب، فأنا آسف على الخوارزمية السيئة التي جربتها وقت طويل وأخيراً قررت الاستسلام....
من خلال تصفح دليل CSS، وجدت سمة مألوفة ولكن غير مألوفة.
اضبط موضع النقطة الأساسية للعنصر المُدار:
أصل التحويل: المحور السيني، المحور الصادي، المحور z؛
يحتوي على ثلاث قيم سمات، والتي تمثل على التوالي مكان وضع العرض المحدد على المحاور X وY وZ.
لقاء صديق قديم في أرض أجنبية، لقاء صديق قديم بعد جفاف طويل! ما أريده هو أنت! تعيين transform-origin: 0 top 0 الحل ~
في الواقع، تم استخدام هذه السمة منذ فترة طويلة، ولكن ما كتبته لأول مرة كان الاختصار transform-origin: 0 ، وبعد تحليله بواسطة المتصفح، كان transform-origin: 0 center 0 ... ما شعرت به في هذا كل شيء، كنت أفكر في نقل إطار iframe لأعلى، لكنني لم أكن أعلم أن الأشخاص الآخرين لديهم مثل هذه الوظيفة، لكنني تجاهلتها. ما زلت لا أستطيع الدراسة على عجل، يمكنني أن أضيع نصف يوم في إحدى السمات، وربما لست واجهة أمامية مؤهلة... (escape
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.