استفسار بخصوص جعل الموقع متجاوب مع جميع أحجام الشاشة

الكود الذي وضعته ليس كافٍ هو خطوة أولى فقط لجعل الموقع متجاوب بحيث يظهر بدون Zoom-out وبعرض شاشة الجهاز فقط.

لكن سيتعين عليك تعديل التنسيقات بما يتناسب مع أحجام الشاشة المختلفة وذلك من خلال media queries، ولا توجد قاعدة واحدة لجميع التصميمات.

لكن لتسهيل الأمر عليك، تستطيع استخدام مكتبات مثل بوتستراب حيث توفر تجاوبية جاهزة للمكونات الخاصة بها.

وبدون المكتبة ستجعل الأمر أسهل لو استخدمت الـ Grid و الـ Flex بشكل صحيح، ستجد تفصيل هنا:

لنشرح أولا الكود الذى أرفقته :

هذا الرمز هو عبارة عن عنصر <meta> في HTML وهو يستخدم لتعيين العرض الأولي للصفحة ومستوى التكبير الإفتراضي على الأجهزة المختلفة وهو يتكون من عدة أجزاء :

1. <meta>: هذا العنصر يستخدم في HTML لتوفير معلومات عن الصفحة التي لا تظهر على المتصفح و للمستخدم مثل الوصف والكلمات الرئيسية (meta tags).
2. name="viewport": هذا هو الخاصية التي تحدد نوع المعلومة التي يحتويها العنصر <meta> وهنا هو يشير إلى أننا نعرف عرض ال viewport.
3. content="width=device-width, initial-scale=1.0": هذه هي القيم التي تحدد كيف ينبغي للمتصفح توسيع الصفحة لتلائم شاشة الجهاز حيث أن :

• width=device-width: يعني أن عرض الصفحة يجب أن تكون هي عرض الجهاز الذي يعرض عليه الصفحة.
• initial-scale=1.0: يحدد مستوى التكبير الإفتراضي للصفحة عندما يتم تحميلها.

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

ولكن ما تقوله بأنك تريد كود يجعل الموقع ثابت مع جميع الشاشات فهو مستحيل فلا يوجد شئ مثل هذا فإذا كان يوجد هذا الكود الذى تبحث عن فلن يكون هناك حاجة إلى التصميمات وإلى تعلم لغة css حيث هي المسؤولة عن التنسيقات . 

لذلك لا يوجد كود يتم تنفيذه على الموقع ليجعله ثابت بل يجب أن يكون كل موقع له التنسيقات الخاصة به فكل موقع يختلف من حيث الهيكل و العناصر .

ولكن يمكنك إستخدام flex box في css فهي من أفضل الخصائص وأقواها في css لجعل العناصر متجاوبة .

يمكنك قراءة الدرس التالي على موقع موسوعة حسوب عن flex box

بتاريخ 14 دقائق مضت قال محمد عاطف17:

لنشرح أولا الكود الذى أرفقته :

هذا الرمز هو عبارة عن عنصر <meta> في HTML وهو يستخدم لتعيين العرض الأولي للصفحة ومستوى التكبير الإفتراضي على الأجهزة المختلفة وهو يتكون من عدة أجزاء :

1. <meta>: هذا العنصر يستخدم في HTML لتوفير معلومات عن الصفحة التي لا تظهر على المتصفح و للمستخدم مثل الوصف والكلمات الرئيسية (meta tags).
2. name="viewport": هذا هو الخاصية التي تحدد نوع المعلومة التي يحتويها العنصر <meta> وهنا هو يشير إلى أننا نعرف عرض ال viewport.
3. content="width=device-width, initial-scale=1.0": هذه هي القيم التي تحدد كيف ينبغي للمتصفح توسيع الصفحة لتلائم شاشة الجهاز حيث أن :

• width=device-width: يعني أن عرض الصفحة يجب أن تكون هي عرض الجهاز الذي يعرض عليه الصفحة.
• initial-scale=1.0: يحدد مستوى التكبير الإفتراضي للصفحة عندما يتم تحميلها.

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

ولكن ما تقوله بأنك تريد كود يجعل الموقع ثابت مع جميع الشاشات فهو مستحيل فلا يوجد شئ مثل هذا فإذا كان يوجد هذا الكود الذى تبحث عن فلن يكون هناك حاجة إلى التصميمات وإلى تعلم لغة css حيث هي المسؤولة عن التنسيقات . 

لذلك لا يوجد كود يتم تنفيذه على الموقع ليجعله ثابت بل يجب أن يكون كل موقع له التنسيقات الخاصة به فكل موقع يختلف من حيث الهيكل و العناصر .

ولكن يمكنك إستخدام flex box في css فهي من أفضل الخصائص وأقواها في css لجعل العناصر متجاوبة .

يمكنك قراءة الدرس التالي على موقع موسوعة حسوب عن flex box

انا استطيع استعمل مكتبة bootstrap لكن متخوف من ان تسبب مشاكل أثناء الاستضافة المدفوعه 

بتاريخ 8 دقائق مضت قال Baker Mohammed:

انا استطيع استعمل مكتبة bootstrap لكن متخوف من ان تسبب مشاكل أثناء الاستضافة المدفوعه 

لا لن تسبب أى مشاكل فهي فقط تستخدم لتنسيق العناصر و الصفحات ولا تؤثر على الموقع في أى شئ فهي مثل ال css الذى تقوم بكتابته .

لذلك يمكنك إستخدامها دون اى قلق منها إن شاء الله

هذا الكود غير كاف لجعل الموقع متجاوب ولكن يُمكنك إتباع الطُرق التاليه لجعل الموقع متجاوب مع جميع أحجام الشاشات:

أولاً: إستخدام قياسات أحجام الشاشه المُختلفه (Media Query) فمثلاً أحجام الشاشات الصغيره (Small) التي تقل عن 600px وهو الحجم الذي يتناسب مع جميع الهواتف الذكيه, وأيضاً أحجام الشاشات المتوسطه (Medium) والتي تتراوح بين 600px إلي 900px وهو الحجم الذي يتناسب مع الأجهزة اللوحية (التابلت) وشاشات الكمبيوتر الصغيرة, وأخيراُ أحجام الشاشات الكبيره (Large) والتي يكون حجمها من 900px فيما فوق لكي يناسب الشاشات الكبيرة جميعها ويمكنك إستخدام الMedia Query كالتالي:

@media only screen and (max-width: 600px) {...} // (كل ما هو أقل من هذا القياس طبق عليه الخصاص التاليه)الشاشات الصغيره
@media only screen and (max-width: 900px) {...} // (كل ما هو أقل من هذا القياس طبق عليه الخصائص التاليه)الشاشاث المتوسطه
@media only screen and (min-width: 900px) {...} // (كل ما هو أكبر من هذا القياس طبق عليه الخصائص التاليه)الشاشات الكبيره

    ثانياً: إستخدام ال Flexbox و ال Grid System في تنسيقاتك والذي من دورة تسهيل عملية التجاوبيه للموقع والتقليل من إستخدام ال Media Query مما يوفر الجهد والوقت.

ثالثاً: إستخدام مكتبات جاهزه كالBootstrap و Tailwind.css والتي توفر كلاسات جاهزه تسهل من عملية جعل الموقع متجاوب وأيضاً توفر الوقت والجهد بصورة أكبر مما يجعل تركيزك علي أجزاء أهم في موقعك.

في النهاية الطُرق كثيره ومتعدده لتنفيذ ما تريد و أنت من تقرر أي طريقه تستخدم بناءاً علي متطلبات المشروع وهدفك.

 - يمكنك الإطلاع علي هذه المقالات التي تتحدث أكثر عن الMedia Query و ال Flexbox, Grid System و وتخطيط الصفحه والتصميم المتجاوب في  Bootstrap: 

 https://wiki.hsoub.com/CSS/@media

https://wiki.hsoub.com/Bootstrap#.D8.AA.D8.AE.D8.B7.D9.8A.D8.B7_.D8.A7.D9.84.D8.B5.D9.81.D8.AD.D8.A7.D8.AA

https://wiki.hsoub.com/CSS#.D8.AA.D8.AE.D8.B7.D9.8A.D8.B7_Flex_Box

بالتوفيق.

كما تم التوضيح في التعليقات السابقة فإنه بالنسبة للتصميم المتجاوب بشكل عام، فإن جعل الموقع متجاوب يتطلب تصميمًا متجاوباًResponsive Design، وهذا يتم عادةً بتوظيف تقنيات مثل CSS Media Queries و Flexbox أو Grid Layout لتنظيم العناصر على الشاشات المختلفة بشكل مناسب.

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

يفضل الإطلاع على الإجابة التالية حيث تشرح هذا الموضوع بشكل رائع ومفصل 

الكود الذي ذكرته هو فقط يجعل الموقع متناسب مع حجم شاشة الهاتف، اما اذا كنت تريد كود التحكم بشاشات متعددة الكمبيوتر، اللابتوب، الآيباد، فعليك استعمال هذا الكود:

@media only screen and (max-width: 600px) {...} // (كل ما هو أقل من هذا القياس طبق عليه الخصاص التاليه)الشاشات الصغيره

@media only screen and (max-width: 900px) {...} // (كل ما هو أقل من هذا القياس طبق عليه الخصائص التاليه)الشاشاث المتوسطه

@media only screen and (min-width: 900px) {...} // (كل ما هو أكبر من هذا القياس طبق عليه الخصائص التاليه)الشاشات الكبيره

عادةً هذا الكود يضع في ملف css، ويمكنك مشاهدة مقاطع فيديو على اليوتيوب لكي تتعرف عليه أكثر...