Omer Amad نشر 9 يوليو أرسل تقرير مشاركة نشر 9 يوليو كيفكم يا اصدقاء... فيه عندي موقع عملت له كود حتى يكون متجاوب مع جميع الشاشات لكن غير كافي ...ممكن تعطونا كود يجعل الموقع شكله ثابت مع جميع الشاشات من غير استعمال المكاتب <meta name="viewport" content="width=device-width, initial-scale=1.0"> 2 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mustafa Suleiman نشر 9 يوليو أرسل تقرير مشاركة نشر 9 يوليو الكود الذي وضعته ليس كافٍ هو خطوة أولى فقط لجعل الموقع متجاوب بحيث يظهر بدون Zoom-out وبعرض شاشة الجهاز فقط. لكن سيتعين عليك تعديل التنسيقات بما يتناسب مع أحجام الشاشة المختلفة وذلك من خلال media queries، ولا توجد قاعدة واحدة لجميع التصميمات. لكن لتسهيل الأمر عليك، تستطيع استخدام مكتبات مثل بوتستراب حيث توفر تجاوبية جاهزة للمكونات الخاصة بها. وبدون المكتبة ستجعل الأمر أسهل لو استخدمت الـ Grid و الـ Flex بشكل صحيح، ستجد تفصيل هنا: اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمد عاطف17 نشر 9 يوليو أرسل تقرير مشاركة نشر 9 يوليو لنشرح أولا الكود الذى أرفقته : هذا الرمز هو عبارة عن عنصر <meta> في HTML وهو يستخدم لتعيين العرض الأولي للصفحة ومستوى التكبير الإفتراضي على الأجهزة المختلفة وهو يتكون من عدة أجزاء : <meta>: هذا العنصر يستخدم في HTML لتوفير معلومات عن الصفحة التي لا تظهر على المتصفح و للمستخدم مثل الوصف والكلمات الرئيسية (meta tags). name="viewport": هذا هو الخاصية التي تحدد نوع المعلومة التي يحتويها العنصر <meta> وهنا هو يشير إلى أننا نعرف عرض ال viewport. content="width=device-width, initial-scale=1.0": هذه هي القيم التي تحدد كيف ينبغي للمتصفح توسيع الصفحة لتلائم شاشة الجهاز حيث أن : width=device-width: يعني أن عرض الصفحة يجب أن تكون هي عرض الجهاز الذي يعرض عليه الصفحة. initial-scale=1.0: يحدد مستوى التكبير الإفتراضي للصفحة عندما يتم تحميلها. وتلخيصا للسابق فإن هذا الكود يساعد في جعل الصفحة تكون متجاوبة وتظهر بشكل صحيح على مختلف أحجام الشاشات ويجعل عرض الصفحة مثل عرض الشاشة تماما . ولكن ما تقوله بأنك تريد كود يجعل الموقع ثابت مع جميع الشاشات فهو مستحيل فلا يوجد شئ مثل هذا فإذا كان يوجد هذا الكود الذى تبحث عن فلن يكون هناك حاجة إلى التصميمات وإلى تعلم لغة css حيث هي المسؤولة عن التنسيقات . لذلك لا يوجد كود يتم تنفيذه على الموقع ليجعله ثابت بل يجب أن يكون كل موقع له التنسيقات الخاصة به فكل موقع يختلف من حيث الهيكل و العناصر . ولكن يمكنك إستخدام flex box في css فهي من أفضل الخصائص وأقواها في css لجعل العناصر متجاوبة . يمكنك قراءة الدرس التالي على موقع موسوعة حسوب عن flex box اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Omer Amad نشر 9 يوليو الكاتب أرسل تقرير مشاركة نشر 9 يوليو بتاريخ 14 دقائق مضت قال محمد عاطف17: لنشرح أولا الكود الذى أرفقته : هذا الرمز هو عبارة عن عنصر <meta> في HTML وهو يستخدم لتعيين العرض الأولي للصفحة ومستوى التكبير الإفتراضي على الأجهزة المختلفة وهو يتكون من عدة أجزاء : <meta>: هذا العنصر يستخدم في HTML لتوفير معلومات عن الصفحة التي لا تظهر على المتصفح و للمستخدم مثل الوصف والكلمات الرئيسية (meta tags). name="viewport": هذا هو الخاصية التي تحدد نوع المعلومة التي يحتويها العنصر <meta> وهنا هو يشير إلى أننا نعرف عرض ال viewport. content="width=device-width, initial-scale=1.0": هذه هي القيم التي تحدد كيف ينبغي للمتصفح توسيع الصفحة لتلائم شاشة الجهاز حيث أن : width=device-width: يعني أن عرض الصفحة يجب أن تكون هي عرض الجهاز الذي يعرض عليه الصفحة. initial-scale=1.0: يحدد مستوى التكبير الإفتراضي للصفحة عندما يتم تحميلها. وتلخيصا للسابق فإن هذا الكود يساعد في جعل الصفحة تكون متجاوبة وتظهر بشكل صحيح على مختلف أحجام الشاشات ويجعل عرض الصفحة مثل عرض الشاشة تماما . ولكن ما تقوله بأنك تريد كود يجعل الموقع ثابت مع جميع الشاشات فهو مستحيل فلا يوجد شئ مثل هذا فإذا كان يوجد هذا الكود الذى تبحث عن فلن يكون هناك حاجة إلى التصميمات وإلى تعلم لغة css حيث هي المسؤولة عن التنسيقات . لذلك لا يوجد كود يتم تنفيذه على الموقع ليجعله ثابت بل يجب أن يكون كل موقع له التنسيقات الخاصة به فكل موقع يختلف من حيث الهيكل و العناصر . ولكن يمكنك إستخدام flex box في css فهي من أفضل الخصائص وأقواها في css لجعل العناصر متجاوبة . يمكنك قراءة الدرس التالي على موقع موسوعة حسوب عن flex box انا استطيع استعمل مكتبة bootstrap لكن متخوف من ان تسبب مشاكل أثناء الاستضافة المدفوعه اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمد عاطف17 نشر 9 يوليو أرسل تقرير مشاركة نشر 9 يوليو بتاريخ 8 دقائق مضت قال Baker Mohammed: انا استطيع استعمل مكتبة bootstrap لكن متخوف من ان تسبب مشاكل أثناء الاستضافة المدفوعه لا لن تسبب أى مشاكل فهي فقط تستخدم لتنسيق العناصر و الصفحات ولا تؤثر على الموقع في أى شئ فهي مثل ال css الذى تقوم بكتابته . لذلك يمكنك إستخدامها دون اى قلق منها إن شاء الله اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمد عبد العزيز3 نشر 10 يوليو أرسل تقرير مشاركة نشر 10 يوليو هذا الكود غير كاف لجعل الموقع متجاوب ولكن يُمكنك إتباع الطُرق التاليه لجعل الموقع متجاوب مع جميع أحجام الشاشات: أولاً: إستخدام قياسات أحجام الشاشه المُختلفه (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 بالتوفيق. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عبدالباسط ابراهيم نشر 10 يوليو أرسل تقرير مشاركة نشر 10 يوليو كما تم التوضيح في التعليقات السابقة فإنه بالنسبة للتصميم المتجاوب بشكل عام، فإن جعل الموقع متجاوب يتطلب تصميمًا متجاوباًResponsive Design، وهذا يتم عادةً بتوظيف تقنيات مثل CSS Media Queries و Flexbox أو Grid Layout لتنظيم العناصر على الشاشات المختلفة بشكل مناسب. بالتالي، ليس هناك كود ثابت محدد يجعل الموقع متجاوب تلقائيًا بدون تخصيص. يتم بناء كل موقع وتعديل تصميمه بحسب متطلبات المشروع والأجهزة المستهدفة. يفضل الإطلاع على الإجابة التالية حيث تشرح هذا الموضوع بشكل رائع ومفصل اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Audai Manaserh نشر 18 أكتوبر أرسل تقرير مشاركة نشر 18 أكتوبر الكود الذي ذكرته هو فقط يجعل الموقع متناسب مع حجم شاشة الهاتف، اما اذا كنت تريد كود التحكم بشاشات متعددة الكمبيوتر، اللابتوب، الآيباد، فعليك استعمال هذا الكود: @media only screen and (max-width: 600px) {...} // (كل ما هو أقل من هذا القياس طبق عليه الخصاص التاليه)الشاشات الصغيره @media only screen and (max-width: 900px) {...} // (كل ما هو أقل من هذا القياس طبق عليه الخصائص التاليه)الشاشاث المتوسطه @media only screen and (min-width: 900px) {...} // (كل ما هو أكبر من هذا القياس طبق عليه الخصائص التاليه)الشاشات الكبيره عادةً هذا الكود يضع في ملف css، ويمكنك مشاهدة مقاطع فيديو على اليوتيوب لكي تتعرف عليه أكثر... اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Omer Amad
كيفكم يا اصدقاء... فيه عندي موقع عملت له كود حتى يكون متجاوب مع جميع الشاشات لكن غير كافي ...ممكن تعطونا كود يجعل الموقع شكله ثابت مع جميع الشاشات من غير استعمال المكاتب
رابط هذا التعليق
شارك على الشبكات الإجتماعية
7 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.