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

تشغيل صفحة ويب على الجوال

اهل الخير

بواسطة اهل الخير

 مشاركة

السؤال

اهل الخير عضو مبتدئ

اهل الخير

نشر
نشر (معدل)

السلام عليكم عندي صحفة web علمتها html  صفحة فورم  الصفحة شغالة حلو على الويب لما ادخل عليها من الموبايل عشان امل بيانات الفورم تصبح الشاشة مش حلو ازاي ازبطها عشان تطلح حلو ومتوافقه مع الموبايل ايه التعديل الي لازم يتعمل في الكود عشان خاطر فتح الصفحة من الموبايل 

 

تم التعديل في بواسطة اهل الخير
  • أعجبني 1

9 أجوبة على هذا السؤال

Recommended Posts

  • 1
محمد ربيع زليول عضو نشيط

محمد ربيع زليول

نشر
نشر (معدل)

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

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

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

الوسم السابق يسمى «التكبير الذكي» (smart zoom) وهو وسم يُستخدم في الأساس لتعديل حجم الصفحة بشكل متناسب، أعتقد انه سيحسن من مظهر الصفحة قليلًا.

المهم لعمل صفحات HTML متجاوبة يمكنك:

1. إستخدام خاصية media query: بحيث تقوم بتحديد أبعاد العناصر لكل حجم من أحجام الشاشة، مثلًا تقوم بكتابة التالي: 

@media screen and (max-width: 1200px) {
.menu {
  width: 100%;
}
}

@media screen and (min-width: 1200px) {
.menu {
  width: 30%;
}
}

ومعنى الكود أعلاه، أنه إن كان حجم الشاشة أصغر من 1200 بكسل سيكون menu بعرض 100%، أما إن كان حجم الشاشة أكبر من 1200 بكسل إجعل menu يحصل على 30% من حجم الشاشة.

وهكذا تقوم بذلك بالنسبة لعناصر HTML الخاص بك حيث تحدد أبعادها في مجموعة من قياسات الشاشة وغالبًا ما تستخدم القياسات التالية: ( 320 بكسل، 480 بكسل، 600 بكسل، 768 بكسل، 900 بكسل، 1024 بكسل، 1200 بكسل).

يمكنك الحصول على تفاصيل أكبر من خلال هذا الرابط: مدخل إلى شبكات CSS العصرية (CSS Grids).

2.إستخدام شبكات CSS العصرية (CSS Grids): تزوّدك شبكات CSS بطريقة سريعة لبناء المواقع المتجاوبة، حيث أنها تساعد في تعديل تموضع عناصر HTML الخاصة بك عن شبكة من الأسطر rows والأعمدة columns والخلايا cells، لا تقلق ستجد في الرابط التالي شرح كامل لإستخدامها: مدخل إلى شبكات CSS العصرية (CSS Grids).

3.إستخدام إيطارات عمل: هناك العديد من إيطارات العمل التي ستوفر عليك الوقت، وستساعدك في جعل القالب الخاص بك متجاوب عن طريق إضافة بعض كلاسات CSS لكود HTML الخاص بك وأذكر من بينها:

تم التعديل في بواسطة محمد ربيع زليول
  • أعجبني 1
  • 0
ماجد قطوسة عضو نشيط

ماجد قطوسة

نشر
نشر

نصيحتي لك و عن تجربة و عن خبرة اكثر من 4 سنوات، هي أن تستخدم مكتبة ال Bootstrap، بحيث يمكنك  أن أن تكتب كود  واحد  فقط  html بدون اي اضافات على ال css او الجافاسكربت  و يكون الكود متوافق مع جميع أنواع الشاشات ليس فقط شاشات الموبايل، و هذه المكتبة توفر عليك كتابة الكثير من الأكواد البرمجية،  سأعيطك مثال بسيط يوضح  لك الفكرة  

<html>
  <body>
    //استخدام كلاس بعنوان row
    // يفتح لك صف جديد داخل صفحة الويب
  	<div class = "row">
      // اضافة عمود داخل الصف - و يكون حجم العمود 4 وحدات 
      <div class = "col-md-4">
        <h3>عنوان 1 </h3>
      </div>
      <div class = "col-md-4">
          <h3>عنوان 2  </h3>
      </div>
      <div class = "col-md-4">
          <h3>عنوان 3 </h3>
      </div>
      // مجموع ألاعمدة يجب ان يكون 12 - أي 4 + 4 +4 = 12 
    </div>
  </body>
</html>

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

  • أعجبني 1
  • 0
ماجد قطوسة عضو نشيط

ماجد قطوسة

نشر
نشر
بتاريخ 2 ساعات قال اهل الخير:

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

تحياتي لك،
هذا موقع خاص بي أعمل عليه و هو قيد التطوير مبني على الBootstrap و ال html  و ال css 
يمكنك إلقاء نظرة عليه و ستلاحظ أنه يعمل على جميع أحجام الشاشات بشكل جيد جدا من هنا

و سأرفك لك نماذج جاهزة للبوتسرات يمكنك تنزل أي نموذج و الإطلاع على الكود الخاص به من هنا

  • أعجبني 1
  • 0
Taha Alshoile عضو مبتدئ

Taha Alshoile

نشر
نشر

السلام عليكم 

لكي تحافظ على المحتوى متناسق مهما اختلف حجم الشاشه عليك بضم كل فقره من فقرات الصفحه داخل div وتقوم بوضع class تسميه حسب ماتحب وليكن container

ثم تقوم باضافة خواص css لهذا ال class بحيث تخبر المتصفح بان يغير حجمه في كل مره تاغير فيها الشاشه

اقتباس

}.container{width:70%;margin: auto;

 

Screenshot (77).png

Screenshot (78).png

  • أعجبني 1
  • 0
عمر عابر سبيل عضو مبتدئ

عمر عابر سبيل

نشر
نشر (معدل)

السلام عليكم انا مشترك جديد 

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

المشكلة نزلت برنامج مواقيت الصلاة على الكمبيوتر من موقع  Tawkit 

البرنامج ملف مضغوك وبعد فك الضغط تظهر مجموعة كن الملفات ولتشغيل اوقات الصلاة حسب موقع البرنامج يجب الضغط على ملف index.html 

يعمل عن طريق المتصفح 

الامور تمام كلها على الكمبيوتر لكن المشكلة على الجوال لا تظهر الصفحة كمافي الكمبيوتر تظهر فقط رموز واشارات وبدون الوان 

Screenshot_٢٠٢٢٠٣١٨-١٦٤٧١٠_Chrome.jpg

تم التعديل في بواسطة عمر عابر سبيل

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

×
 مشاركة
اذهب إلى قائمة الأسئلة

  • إعلانات

  • تابعنا على



×
×
  • أضف...