احتاج مساعده

مرحبا
لقد راجعت الكود واتضح ان المشكلة لديك في class header
هنا في

.header {
  background-image: url(assets/images/batik\ mob.gif) !important;
  background-size: cover !important;
  height: 100vh;
  width: 100%;
  background-position: center center !important;
}

هنا تفرض ان background-size:cover
اي انه يملي المساحة كامل وكما height 100hv اي ياخد full height screen  وفي شاشات اللابتوب يكون  عرض الشاشة اكبر من ارتفاعها لذلك لاتلاحظ هنا اي مشاكل  ولالكن علي شاشات الموبيل يكون ارتفاع الشاشة اكبر من عرضها لذالك تجد انه ال background حصل له stretched
لذاللك لحل هذه المشكل يمكن تجيم ارتفاع عند 400px مثلا

@media (max-width: 768px) {
  .header {
    background-size: auto !important; //reset حجم الشاشة
    background-attachment: scroll !important;
    height: 400px;
    
  }
}

اضف هذا في style

الموقع يعمل بشكل جيد سواء على الموبايل أو الديسكتوب 
عند عمل الموقع يتم اعداده ليكون شكله جيد سواء على الموبايل أو الديسكتوب أى يكون متجاوب مع معظم أحجام الشاشات لأنه لو تم اعداده ليكن بحجم واحد على علي كل الشاشات هذا سيكون سئ للمستخدم.

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

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

مزايا تصميم مواقع الويب المتجاوبة

تؤدي المواقع المتجاوبة مع جميع الأجهزة نتائج جيدة مقارنةً بغيرها، وتتمثل أهم مزاياها فيما يلي:

زيادة عدد المستخدمين

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

تحسين تجربة المستخدم

المواقع المتجاوبة مع جميع الأجهزة تجعل تجربة المستخدم أفضل على عكس المواقع المتجاوبة مع الأجهزة المكتبية فقط أو الهواتف الذكية فقط التي تجعل فئة كبيرة من الزوار لا يتمكنون من استخدام الموقع بسهولة.

سرعة التحميل

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

تحسين محركات البحث

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

بتاريخ 13 دقائق مضت قال Mustafa Mahmoud7:

الموقع يعمل بشكل جيد سواء على الموبايل أو الديسكتوب 
عند عمل الموقع يتم اعداده ليكون شكله جيد سواء على الموبايل أو الديسكتوب أى يكون متجاوب مع معظم أحجام الشاشات لأنه لو تم اعداده ليكن بحجم واحد على علي كل الشاشات هذا سيكون سئ للمستخدم.

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

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

مزايا تصميم مواقع الويب المتجاوبة

تؤدي المواقع المتجاوبة مع جميع الأجهزة نتائج جيدة مقارنةً بغيرها، وتتمثل أهم مزاياها فيما يلي:

زيادة عدد المستخدمين

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

تحسين تجربة المستخدم

المواقع المتجاوبة مع جميع الأجهزة تجعل تجربة المستخدم أفضل على عكس المواقع المتجاوبة مع الأجهزة المكتبية فقط أو الهواتف الذكية فقط التي تجعل فئة كبيرة من الزوار لا يتمكنون من استخدام الموقع بسهولة.

سرعة التحميل

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

تحسين محركات البحث

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

لكنني عند يكون هناك زوم غريب عند فتح من الجوال قد قمت بفحص التجاوبيه انها ممتازه لكنني عند فتحه للجوال تحدث هاذي المشكله

ممكن فديو يوضح المشكلة بالظبط لكى تتضح المشكلة أكثر

بتاريخ 4 دقائق مضت قال Mahmoud Hassan19:

مرحبا
لقد راجعت الكود واتضح ان المشكلة لديك في class header
هنا في

.header {
  background-image: url(assets/images/batik\ mob.gif) !important;
  background-size: cover !important;
  height: 100vh;
  width: 100%;
  background-position: center center !important;
}

هنا تفرض ان background-size:cover
اي انه يملي المساحة كامل وكما height 100hv اي ياخد full height screen  وفي شاشات اللابتوب يكون  عرض الشاشة اكبر من ارتفاعها لذلك لاتلاحظ هنا اي مشاكل  ولالكن علي شاشات الموبيل يكون ارتفاع الشاشة اكبر من عرضها لذالك تجد انه ال background حصل له stretched
لذاللك لحل هذه المشكل يمكن تجيم ارتفاع عند 400px مثلا

@media (max-width: 768px) {
  .header {
    background-size: auto !important; //reset حجم الشاشة
    background-attachment: scroll !important;
    height: 400px;
    
  }
}

اضف هذا في style

لماذا لاتظهر المشكله عندما اصغر حجم الشاشه في الابتوب

بتاريخ 1 دقيقة مضت قال Zyad Developer:

لماذا لاتظهر المشكله عندما اصغر حجم الشاشه في الابتوب

لانه عند تصغير حجم الشاشة سوف تنقص من width الشاشة وبذاللك نرجع الي نفس المشكة في شاشة الموبيل  الارتفاع اكبر من العرض

بتاريخ On 1‏/5‏/2024 at 14:37 قال Chihab Hedidi:

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

كيف يمكنني تعلم موبايل ابلكيشن عل اكادميه حاسوب 

كيف يمكنني تعلم موبايل ابلكيشن عل اكادميه حاسوب 

بتاريخ 48 دقائق مضت قال محمود الكناني:

كيف يمكنني تعلم موبايل ابلكيشن في أكاديمية حسوب 

ستحتاج إلى دراسة دورة تطوير التطبيقات باستخدام JavaScript لأنك ستتمكن من تعلم لغة جافاسكريبت ومن خلالها تستطيع تطوير الواجهة الأمامية والخلفية وبناء تطبيق لسطح المكتب، وبناء تطبيقات للهواتف أيضًا تعمل على منصتي أندرويد و iOS وذلك من خلال إطار React Native.

وستتعلم بها ما يلي:

• الأسس البرمجية السليمة للغة JavaScript
• الإضافات الحديثة في نسخة ES6 من اللغة
• تطوير تطبيقات الخادم باستخدام بيئة Node.js
• أساسيات مكتبة React.js وبناء تطبيق ملاحظات باستخدامها
• أساسيات مكتبة React Native و Expo
• تطوير تطبيق جوال للوصل بين الأطباء والمرضى بالاعتماد على React Native
• التعرف على التطبيقات التي تتطلب اتصالًا مستمرًا بين المتصفح والخادم
• بناء تطبيق محادثة يشبه تطبيق WhatsApp
• إنشاء تطبيق أسئلة وأجوبة ونقاشات مع تصيير من جهة الخادم Server-side Rendering عبر إطار العمل Next.js
• بناء واجهات أمامية باستخدام React.js مع مكتبة Material-UI
• إنشاء تطبيقات سطح مكتب باستخدام JavaScript باستخدام إطار العمل Electron.js
• بناء تطبيق جوال لشبكة تواصل اجتماعي باستخدام إطار العمل Ionic ومكتبة React.js

لذا تستطيع دراسة جافاسكريبت ثم دراسة مسار React Native فقط إذا كنت تريد تطوير التطبيقات للهواتف فقط.