كيف تجعل مدونتك تتجاوب مع كل
اجهزة الهاتف المحمولة و بالقي الاجهزة الاخري
----------------------------
How do you make your blog respond with all mobile phones and other devices Bagay
----------------------------
السلام عليكو و رحمة الله تعالى و بركاته اخواني اخواتي الكرام متتبعي مدونة المتخصص
اهلا و سهلا بكم في هذا الشرح الجديد على مدونتكم المتخصص...
السلام عليكم ورحمة الله و بركاته متتبعي برامج انترنت و اخبارك
نت أهلا بكم في هذا الموضوع الذي
يخص ادوات بلوجر و سوف نشرح كيفية جعل المدونة تتجاوب مع كل انواع اجهزة الهاتف المحمول ... بالتفصيل
سوف نقدم لكم شرحا وافيا خطوة بخطوة عن كيفية
جعل مدونتك تتجاوب مع كل الاجهزة الهاتفية المحمولة مثل الهواتف الذكية، و اللوحات
المحمولة بمختلف احجامها و انواعها........
فبعد التقدم الرهيب في مجال الموبايل خلال
السنوات الاخيرة و اصبح الناس يتوجهون الى تصفح الانترنت عن طريق الهاتف النقال،
اصبح من الضروري ان نتماشى مع تطورات العصر التقنية و ان ندرك خبايا هذه
التكنولوجيا الحديثة جدا، لان عدد مستعملي الهاتف النقال في تزايد مستمر مع الوقت،
لهذا يجب ان نرقي موقعنا ليعمل على مختلف اجهزة الهاتف المختلفة الاحجام، و قد تم
ايجاد الحل في هذا المجال عن طريق اكواد css و التي سنصع لكم هذه التقنية بين ايديكم لتطوير
منتدياتكم...............
سنبدأ الشرح تابعو معنا هذا الشرح خطوة بخطوة
حتى تصل والى مبتغاكم المنشود ........
نطلب منكم قليل من التركيز في اتباع هذه
الخطوات فهي ليست بالامر الصعب فقط بعض اتركيز....
لنبدأ............
افتح مدونتك بلوجر blogger ، ثم من قالب قم باختيار HTML قصد تغيير الصفحة الى اكواد HTML ....
من
هذه الصفحة ننقر على ctrl + f من لوحة المفاتيح و ندخل الكود التالي للبحث عنه
</head>
بعد ان نجده نقوم باضافة فوقه كود الميتا تاج
التاليك
<meta content='width=device-width, initial-scale=1.0, maximum-scale=12.0, minimum-scale=.25, user-scalable=yes' name='viewport'/>
بنفس طريقة البحث السابقة ، نبحث عن الكود
التاليك
]]></b:skin>
و نظيف فوقه مباشرة هذا الكود (كود css) و هو كود خاص بجميع الاجهزة من ناتبوك NETBOOK و التابلات TABLETS بمختلف احجامها و
الايفون Iphon
و اجهزة الموبايل المحمولة الاخرة بمختلف احجامها ايضا:
Responsive styles
******************************************/
@media screen and (max-width : 1280px) {
/* CSS FOR NETBOOK AND DESKTOP ------------*/
}
@media screen and (max-width : 1024px) {
/* CSS FOR TABLETS ------------*/
}
@media screen and (max-width : 768px) {
/* CSS FOR SMALL TABLETS ------------*/
}
@media screen and (max-width : 640px) {
/* CSS FOR IPHONE ------------*/
}
@media screen and (max-width : 480px) {
/* CSS FOR MOBILES ------------*/
}
@media screen and (max-width : 320px) {
/* CSS FOR SMALL OLD MOBILES ------------*/
}
/***************************************************
سنشرح بشيئ من التفصيل لاهم المناطق التي
سنقوم باجراء التعديلات عليها في أي موقع او قالب نريده ان يتجاوب مع كل الاجهزة
كما يلي:
ان كلمة max-width تعني اقصى حد من ناحية العرض (أي عرض الجهاز)
اما كلمة الهيدر header فهي تعني الجزء العلوي من
الموقع
مصطلح outer wrapper
يعني الغلاف الخارجي للموقع و الذي يحتوى على كل محتويات الموقع
مصطاح body يعنى وسط القالب او الجزء الذي يوجد به محتويات
موقعنا.
مصطلح main wrapper
يعني القسم الذي يجمع العناصر الاساسية للموقع
اما
مصطلح sidebar
فهو الشريط الجانبي الذي يحتوى على العناصر الاساسية للموقع.
مصطلح footer يعني القسم السفلي من الموقع أي ذيل الموقع.
و هذا مثال على بعض التغييرات التي نقوم بها بداخل كل
جزء من الاكواد السابقة الذكر، و لنأخذ كمثال الهواتف القديمة لتطبيق عليه
التغييرات اللازمة كما يلي:
الكود يبدا كما
يلي من الكود السابق:
@media screen and (max-width : 320px) {
/* CSS FOR SMALL OLD MOBILES ------------*/
سندخل عليه التعديلات اللزمة من خلال تغيير قيم
المصطلحات السابقة الذكر (footer، sidebar، body، outer wrapper، header ......)
حيث width تدل على عرض الشاشة الخاصة بالهاتف،padding تعني اختيار ابعاد و حواف الموقع بالنسبة الى شاشة
الهاتف النقال، و height يعنى طول
الشاشة التي سيطعر عليها الموقع ، text-align قصد التحكم في اتجاه
النصوص، margin للتحكم في اماكن العناصر بداخل الموقع،
@media screen and (max-width : 320px) {
/* CSS FOR SMALL OLD MOBILES ------------*/
#outer-wrapper{width:320px;margin:0px auto;padding:0;overflow:hidden;}
#header{width:320px;margin:0 auto;padding:0;float:none}
#main-wrapper{width:320px;float:right;margin:0;padding:0;overflow:hidden;}
#footer{width:320px;float:none;margin:0 auto;padding:0;overflow:hidden;}
#sidebar-wrapper{width:320px;margin:0 auto; float:none;}
.post{ width:320px ;margin:0 auto;}
و نكرر نفس التعديلات مع باقي الاجزاء و الاكواد الخاصة
بباقي الاجهزة المحمولة.
الى هنا ناتي الى نهاية شرح هذا الدرس اتمنى ان يكون قد
اعجبكم هذا الشرح المتواضع
اشتركو معنا على مدونتنا ليصلكم كل جديد
ضعو بريدكم في مدونتنا
الى هنا نكون قد قدمنا لكم هذا
الوضوع ليكون اضافة في سرح المعرفة اتمنى ان يكون في متناول الجميع ....
اذا واجهتك أي مشكل او تسائل
ضعه في تعليق اسفل الموضوع و سنجيبكم على كل التسائلات باذن الله ....
ان اعجبك الموضوع لا تنسى بمتابعتنا
بالنقر على متابعة بالبريد الالكتروني في اسفل الموضوع حتى يصلكم كل جديد في موقع برامج
انترنت و اخبارك نت ...
يمكنكم
متابعة ايضا المواقع التالية كمصدر لاهم المعلومات .....
زورو المواقع التالية
|
|
|
|
|
|
|
|
|
ليست هناك تعليقات