كيف يتم بناء موقع يعمل على متصفح الموبايل والكمبيوتر معا...هل هذا سهل ؟
كيف يتم تشغيل موقع ويب الكمبيوتر على متصفح الموبايل ؟
لا تحتاج للكثير من المهارات إذا كنت تُتقن التعامل مع HTML وCSS.
هذه الخاصيّة تُعرف بـ Responsive أي مُتجاوب ويُمكنك استخدام Bootstrap لذلك. إليك مثال بسيط :
عادةً أنت تقوم بإنشاء Div ووضع عناصر بداخله
<div>
<p> أهلًا بالعالم </p>
</div>
باستخدام Bootstrap بإمكانك التحكم بطريقة ظهور وعرض هذا العنصر من خلال استخدام كلاسات جاهز مثل col-lg و col-xs لأجهزة الموبايل ليصبح على الشكل
<div class="col-lg-12 col-xs-12">
<p> أهلًا بالعالم </p>
</div>
هذا بكل بساطة :)
المواقع الجاهزة مثل بلوغر تكون متجاوبة بشكل آلي ,أما المواقع التي يبرمجها الناس فأن جعلها متجاوبة تحتاج الى خبير على مااعتقد والطريقة ليس لدي أي فكرة عنها.
أقرأ أكثر عن responsive web ، ستجد أن هناك استعمال واسع لخصائص css
و ستلاحظ أن الأبعاد كلها تصبح بشكل نسبي
ولإضافة معلومة على ما قدمه الأخوة وهي يجب استخدام ما يسمى بCSS MEDIA QUERIES وتقوم على اساس انشاء ملف CSS لكل جهاز تبعا لحجم شاشته وبإمكانك عمله مثلا عن طريق استخدام هذا الكود في الـhead :
<meta name="viewport" content="width=device-width">
<!-- screen css -->
<link rel="stylesheet" type="text/css" media="screen" href="styles/style.css">
<!-- print css -->
<link rel="stylesheet" type="text/css" media="print" href="styles/print.css">
<!-- smart phone -->
<link href="styles/sma.css" rel="stylesheet" type="text/css" media="(min-width:320px) and (max-width:500px)">
<!-- tablet -->
<link href="styles/tablet.css" rel="stylesheet" type="text/css" media="(min-width:500px) and (max-width:1000px)">
ثم تقوم بخصخصة كل ملف تبعا للجهاز المطلوب, وتستطيع تغيير حجم الشاشة من خلال متصفحك (إذا كان فايرفوكس إضفط على Ctrl+shift+M)
علما ان العملية سهلة في حالة كانت من ضمن الخطة قبل إنشاء الموقع
التعليقات