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

اهل الخير · 12 يونيو 2020

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

تم التعديل في 12 يونيو 2020 بواسطة اهل الخير

محمد ربيع زليول · 12 يونيو 2020

المشكلة هنا، هي مشكلة توافق مع الهاتف، صفحة 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 الخاص بك وأذكر من بينها:

Boostrap: تعرّف على Bootstrap 3 ونظامه الشّبكي (Grid System)
Foundation: أساسيات إطار عمل Foundation: النّظام الشّبكي
Skeleton: وهي مكتبة صغيرة وبسيطة لعمل تصاميم متجاوبة ( أستخدمها شخصيًا في المشاريع الصغيرة).

تم التعديل في 12 يونيو 2020 بواسطة محمد ربيع زليول

اهل الخير · 12 يونيو 2020

شكرا وجزاك الله خير وربنا يكرمك حجرب وربنا كريم

ماجد قطوسة · 13 يونيو 2020

نصيحتي لك و عن تجربة و عن خبرة اكثر من 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>

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

اهل الخير · 14 يونيو 2020

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

ماجد قطوسة · 14 يونيو 2020

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

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

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

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

اهل الخير · 14 يونيو 2020

شكرا مهندس ماجد ربي يعطيك العافية حجرب وربنا كريم

Taha Alshoile · 15 يونيو 2020

السلام عليكم

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

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

اقتباس

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

اهل الخير · 15 يونيو 2020

بشمهندس طه ربنا يكرمك تسلم ياغالي وياريت لوتكرمني بمثال صغير ملف html و css لانني مبتدء في بداية الطريق

عمر عابر سبيل · 18 مارس 2022

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

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

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

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

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

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

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

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

السؤال

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

Recommended Posts

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على