فقط عندما قمت بتعديل بناء جملة CSS,不知道為什麼,بعد محاكاة دقة دقة الهاتف المحمول,لا يُظهر الإصدار التأثير الذي يجب أن يكون لـ RWD,في البداية اعتقدت أن صيغة الشاشةmedia لم تدخل حيز التنفيذ,بعد الاختبار المتكرر,وجد أن عرض النحو النحوي لا يتبع تغيير نسبة الدقة (مضبوط بالفعل على تلقائي أو استخدم max-width)。لاحقًا ، حاولت إغلاق وضع "Web Developer"”محاكاة اللمس”المميزات,سيكون طبيعيا,لا أعرف لماذا يؤثر ذلك بهذه الطريقة。
فايرفوكس
قم بتشغيل محاكاة اللمس
قم بإيقاف تشغيل محاكاة اللمس
حافة (الكروم) طريقة التعديل
1. نقطة"…"
2. حدد "إضافة نوع الجهاز"
1. اختيار نوع الجهاز "مستجيب"
2. في "نوع الجهاز" من “التليفون المحمول” 改成 “سطح المكتب” إلى。
《2024/02/23 更新》
後來找出原因,網站在 HTML Head 有定義 viewport 的 meta tag,如下:
<meta name="viewport" content="width=device-width" />
但沒有定義 initial-scale 比例,因此補上就可以了。
<meta name="viewport" content="width=device-width, initial-scale=1" />
【參考連結】
- في جوجل كروم, أين هي القدرة على تعطيل محاكاة مستشعر اللمس? – كورا
- Responsive Web Design 基礎 : مجموعة | by Amdis Liu | Frochu | Medium