يستمر استخدام الأجهزة المحمولة لتصفح الويب في النمو بوتيرة فلكية ، وغالبًا ما تكون هذه الأجهزة مقيدة بحجم العرض وتتطلب نهجًا مختلفًا لكيفية عرض المحتوى على الشاشة.
تصميم الويب سريع الاستجابة ، الذي حدده في الأصل إيثان ماركوت في A List Apart ، يستجيب لاحتياجات المستخدمين والأجهزة التي يستخدمونها. يتغير التخطيط بناءً على حجم الجهاز وقدراته. على سبيل المثال ، قد يرى مستخدمو الهاتف المحتوى المعروض في عرض عمود واحد ؛ قد يعرض الجهاز اللوحي نفس المحتوى في عمودين.
يوجد العديد من أحجام الشاشات المختلفة عبر الهواتف والأجهزة اللوحية وأجهزة الكمبيوتر المكتبية وأجهزة الألعاب وأجهزة التلفزيون وحتى الأجهزة القابلة للارتداء. تتغير أحجام الشاشة دائمًا ، لذا من المهم أن يتكيف موقعك مع أي حجم شاشة ، اليوم أو في المستقبل. بالإضافة إلى ذلك ، تتمتع الأجهزة بميزات مختلفة نتفاعل معها. على سبيل المثال ، سيستخدم بعض زوار موقعك شاشة تعمل باللمس. يأخذ التصميم الحديث المتجاوب في الاعتبار كل هذه الأشياء لتحسين التجربة للجميع.
إنضم الي جروب تلجرام للربح من بلوجر وحل المشاكل التي قد تواجهك.
إنضم الي جروبنا علي تلجرام
حل مشكلة المحتوى أوسع من الشاشة.
يجب أن تتضمن الصفحات المحسّنة لمجموعة متنوعة من الأجهزة علامة meta viewport في رأس المستند. توفر علامة meta viewport إرشادات المستعرض حول كيفية التحكم في أبعاد الصفحة وقياسها.
بمعني آخر: نقوم بإضافة بعض الاكواد الي القالب الرئيسي لمدونتك لتقوم بقياس وتعديل الابعاد حسب نوع المتصفح و حجم الشاشة.
لمحاولة تقديم أفضل تجربة ، تعرض متصفحات الجوال الصفحة بعرض شاشة سطح المكتب (عادةً حوالي 980 بكسل ، على الرغم من أن هذا يختلف عبر الأجهزة) ، ثم حاول تحسين مظهر المحتوى عن طريق زيادة أحجام الخطوط وقياس المحتوى ليناسب شاشة. هذا يعني أن أحجام الخطوط قد تبدو غير متسقة للمستخدمين ، الذين قد يضطرون إلى النقر المزدوج أو التصغير للتكبير لرؤية المحتوى والتفاعل معه.
قم بوضع هذا الكود بين علامتي <Head>.. <head/>
تحافظ بعض المتصفحات على ثبات عرض الصفحة عند التدوير إلى الوضع الأفقي ، والتكبير بدلاً من إعادة التدفق لملء الشاشة. تؤدي إضافة القيمة initial-scale = 1 إلى توجيه المستعرضات لإنشاء علاقة 1: 1 بين وحدات بكسل CSS ووحدات البكسل المستقلة عن الجهاز بغض النظر عن اتجاه الجهاز ، وتسمح للصفحة بالاستفادة من العرض الأفقي الكامل.
استخدام استعلامات وسائط CSS للاستجابة.
ستحتاج أحيانًا إلى إجراء تغييرات أكثر شمولاً على التخطيط الخاص بك لدعم حجم شاشة معين مما تسمح به التقنيات الموضحة أعلاه. هذا هو المكان الذي تصبح فيه استعلامات الوسائط مفيدة.
استعلامات الوسائط هي مرشحات بسيطة يمكن تطبيقها على أنماط CSS. إنها تجعل من السهل تغيير الأنماط بناءً على أنواع الجهاز الذي يعرض المحتوى ، أو ميزات هذا الجهاز ، على سبيل المثال العرض والارتفاع والاتجاه والقدرة على التمرير وما إذا كان يتم استخدام الجهاز كشاشة تعمل باللمس.
لتوفير أنماط مختلفة للطباعة ، تحتاج إلى استهداف نوع من المخرجات بحيث يمكنك تضمين هذا الكود بأنماط طباعة على النحو التالي.
قم بوضع هذا الكود بين علامتي <Head>.. <head/>
تفاصيل قد تؤدي الي عدم حل المشكلة.
1) قم بتقييد محتوي الموضوع الذي تقدمه بداخل مربع مشاركة بلوجر.
2) الحفاظ علي حجم الصور بحيث ان لا تتعدي الاحجام المناسبة لمدونة بلوجر.
3)هذه المشكلة أيضا هي من تجعل المحتوي غير قابل للاستخدام علي الجوال. (قابلية الاستخدام علي الجوال) بسبب احجام الشاشات المختلفة. فيمكن ان تحل مشكلة قابلية الاستخدام علي الجوال بهذه الطريقة إذا لم يكن هناك مشكلة آخري بمدونتك.
إنضم الي جروب تلجرام للربح من بلوجر وحل المشاكل التي قد تواجهك.
إنضم الي جروبنا علي تلجرام
