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

تنسيق الصفحة حسب عرض الشاشة

Hadi Hasan

السؤال

أنشأت موقعاً من عدة صفحات html و عدة صفحات css  و صفحات جافاسكريبت , و قمت بتنسيق الصفحات في  css حسب عرض الشاشة ( حتى عرض 300 بكسل ) .

لكني عندما نقلت الملفات إلى جهاز الموبايل (  alcatel )  و ذلك بضغطها و من ثم فك الضغط في الموبايل , تفاجأت أن الصفحات غير منسقة إطلاقاً حتى عندما أضع الشاشة بشكل عرضي , كما أن بعض الصور لم تظهر  رغم تأكدي من تحميلها .

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

ماذا علي أن أفعل و كيف أتأكد من تنسيق الصفحات ؟

 

تم التعديل في بواسطة Hadi Hasan
رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 2

في كثير من الأحيان لا يمكن للمتصفح الوصول إلى الملفات المخزننة محليًا، لذلك ستجد أن كل ملف CSS و JavaScript والصور والفيديوهات لا تعمل عن فتح ملف html في المتصفح مباشرة، ويمكن حل هذه المشكلة بأكثر من طريقة، منها:

  • حاول رفع الملفات على GitHub وبإستخدام خدمة GitHub Pages ملفات المشروع مجانًا وستحصل على رابط لزيارة صفحة المشروع، ويمكنك فتح هذا الرابط على الهاتف وسيعمل بدون مشكلة.
  • يمكنك إستخدام خدمة مثل ngrok والتي ستوفر لك رابط مباشر بشكل مؤقت للوصول إلى ملفات المشروع الخاص بك من أي مكان. في البداية عليك تحميل ngrok وإتباع الخطوات التي ستظهر لك في الموقع بعد تسجيل الدخول، ثم عليك تنفيذ الأمر التالي:
    ngrok http "file:///C:/Users/Pc/Desktop/window"

    عليك فقط تغير المسار الموجود في الأمر السابق ليصبح مسار مجلد المشروع الخاص بك، ثم ستحصل على عنوان مثل https://80b9-197-26-21-120.eu.ngrok.io

 

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

  • 1

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

جرب كتابة الاكواد جميعها في صفحة الـ html وجربها مرة ثانية فإذا حلت المشكلة فهذا يعني أن مشكلتك في المسارات. مثال على كتابة جميع الاكواد في صفحة الـ html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* css اكتب هنا ال  */
    </style>
  </head>
  <body>
    <!-- html إكتب هنا الـ  -->
    <script>
      // إكتب هنا الجافاسكريبت
    </script>
  </body>
</html>

 

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

  • 0
بتاريخ 14 ساعات قال عمر قره محمد:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

هذا السطر الوحيد الذي لم يكن في الصفحات , ماذا يعني هذا السطر ؟

بحثت عن جواب سؤالي فوجدت عدة خيارات هل أضعها كلها  ؟

<meta http-equiv="X-UA-Compatible" content="IE=5" />

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<meta http-equiv="X-UA-Compatible" content="IE=7.5" />

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

<meta http-equiv="X-UA-Compatible" content="IE=8" />

<meta http-equiv="X-UA-Compatible" content="IE=100" />

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=5" >

تم التعديل في بواسطة Hadi Hasan
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 3 ساعات قال Hadi Hasan:

هذا السطر الوحيد الذي لم يكن في الصفحات

على كل حال لم أستفد من إضافة السطر .

حاولت فتح الملفات في الموبايل عن طريق chrome لأنه موجود عندي في الموبايل , لكن لم أستطع لا يوجد إلا خيار فتحه عن طريق : عارض  html  . 

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

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

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

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

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

  • إعلانات

  • تابعنا على



×
×
  • أضف...