اذهب إلى المحتوى
  • 0

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

Omer Amad

السؤال

كيفكم يا اصدقاء... فيه عندي موقع عملت له كود حتى يكون متجاوب مع جميع الشاشات لكن غير كافي ...ممكن تعطونا كود يجعل الموقع شكله ثابت مع جميع الشاشات من غير استعمال المكاتب

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

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

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

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

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

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

هذا الرمز هو عبارة عن عنصر <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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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 لكن متخوف من ان تسبب مشاكل أثناء الاستضافة المدفوعه 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

أولاً: إستخدام قياسات أحجام الشاشه المُختلفه (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

بالتوفيق.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

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

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...