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

< طلب شرح > كيف اجعل الاستايل يتوافق مع الجوالات

السلام عليكم ورحمة الله وبركاته . اسعد الله اوقاتكم اعضاء وزوار وطاقم فريق العمل . الكرام عندي سؤال وياليت الرد عليه بأجابة مقنعة


موضوع مغلق


  • تمت الإجابة
16-01-2017 09:52 صباحاً
معلومات الكاتب ▼
انضم في : 23-08-2016
رقم العضوية : 6,837
المشاركات : 507
الدولة : المملكة العربية السعودية
الجنس :
تاريخ الميلاد : 17-9-1999
الدعوات : 2
قوة السمعة : 1,090
[p]


<big>
<tt><small> السلام عليكم ورحمة الله وبركاته .



اسعد الله اوقاتكم
اعضاء وزوار وطاقم فريق العمل . الكرام

عندي سؤال وياليت الرد عليه بأجابة مقنعة 46345

كيف اجعل الاستايل يتوافق مع الجوالات
زي الجلكسي الايفون و غيرها .!

# واول تجربة راح اسوي فيها استايل ماتين2
805681



</small></tt>

</big>

</pre>
تم تحرير الموضوع بواسطة :عبدالاله الهذلي بتاريخ:16-01-2017 09:54 صباحاً

look/images/icons/i1.gif [ طلب شرح ] كيف اجعل الاستايل يتوافق مع الجوالات
  16-01-2017 02:25 مساءً   [1]
معلومات الكاتب ▼
انضم في : 27-11-2012
رقم العضوية : 2,642
المشاركات : 3,234
الدولة : morocco
الجنس :
تاريخ الميلاد : 1-1-1987
الدعوات : 6
قوة السمعة : 18,910
مرحبا بك،

أسهل طريقة هي الانطلاق من أحد الاستايلات المتوافقة مع الجوال من أجل الحصول على مبتغاك

مثلا استبدل خلفيات الاستايل الافتراضي بخلفيات استايل ماتين

look/images/icons/i1.gif [ طلب شرح ] كيف اجعل الاستايل يتوافق مع الجوالات
  16-01-2017 08:39 مساءً   [2]
معلومات الكاتب ▼
انضم في : 23-08-2016
رقم العضوية : 6,837
المشاركات : 507
الدولة : المملكة العربية السعودية
الجنس :
تاريخ الميلاد : 17-9-1999
الدعوات : 2
قوة السمعة : 1,090
ياليت توضح اكثر واكثر ..!

ماهي القوالب يلي تحتاج لتعديل
CSSايش اضيف فيه وايش احذف ...


تم تحرير المشاركة بواسطة :عبدالاله الهذلي بتاريخ:16-01-2017 08:40 مساءً


look/images/icons/i1.gif [ طلب شرح ] كيف اجعل الاستايل يتوافق مع الجوالات
  16-01-2017 10:08 مساءً   [3]
معلومات الكاتب ▼
انضم في : 18-07-2009
رقم العضوية : 1
المشاركات : 12,596
الدولة : KSA
الجنس :
الدعوات : 52
قوة السمعة : 74,196
موقعي : زيارة موقعي
وعليكم السلام
سؤالك بسيط لكن الأجابة عليه يطول شرحها وليست بالسهله
لكن الاسهل هو ان تضع استايل خاص لمتصفحى الجوال
مثل (الاستايل الافتراضي - ستايل أوركيد - ستايل pbbsup - ستايل Elites - ستايل Dark Flat - ستايل سما العرب الأزرق ) فهذه جميعها ستايلات جاهزة متوافقه مع الجوال

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

ثم توجه إلى صفحة اختبار التناسب مع الجوّال - Google Search Console التي يوفرها قوقل
واختبر تناسب منتداك مع الجوال لترى النتيجة

look/images/icons/i1.gif [ طلب شرح ] كيف اجعل الاستايل يتوافق مع الجوالات
  16-01-2017 11:03 مساءً   [4]
معلومات الكاتب ▼
انضم في : 23-08-2016
رقم العضوية : 6,837
المشاركات : 507
الدولة : المملكة العربية السعودية
الجنس :
تاريخ الميلاد : 17-9-1999
الدعوات : 2
قوة السمعة : 1,090
طيب وطريقة صعبة ولمطولة

look/images/icons/i1.gif [ طلب شرح ] كيف اجعل الاستايل يتوافق مع الجوالات
  17-01-2017 12:43 صباحاً   [5]
معلومات الكاتب ▼
انضم في : 18-07-2009
رقم العضوية : 1
المشاركات : 12,596
الدولة : KSA
الجنس :
الدعوات : 52
قوة السمعة : 74,196
موقعي : زيارة موقعي
المشاركة الأصلية كتبت بواسطة: عبدالاله الهذلي طيب وطريقة صعبة ولمطولة
إذا عندك خبرة في التعامل مع CSS3 فلا يوجد اي صعوبة
كما قلت لك شرح جعل ستايل متجاوب مع الجوال وجميع الشاشات المختلفة هي طريقة مطولة
لكن ساوجزها لك باختصار سريع فهي تتم عبر خاصية
CSS media queries
و هي أحد خصائص CSS3 وهي لمعرفة ولتحديد قياس شاشة العرض الجهاز المراد عمل تنسيق له

ثم تضيف أكواد CSS اسفل ملف style.css الخاص بالاستايل:
مثال :
يتصفح منتداي شخص من شاشة جوال عرضها أقل من 480px
فتضيف هذا الكود في الأسفل تماماً ملف style.css الخاص بالاستايل
CODE
@media screen and (max-width: 480px) {

وهنا تضيف جميع الكلاسات التي تريد ان تغييرها لتتوافق مع عرض الشاشة الأقل من 480px
مثلاً لتغير العرض 
width: 40%;
min-width: 40%;
أو الإخفاء 
display: none;

الخ ........ 

}


وكل مرة تعمل تعديل افتح المنتدى وصغر الشاشة أي حاول تكبير/تصغير دقة الشاشة وشاهد تعديلاتك الجديدة على الشاشة الصغيرة

و لعمل تصميم المتجاوب يعمل على عدة قياسات أخرى مختلفة لأجهزة يتم عمل تنسيق css لكل قياس بشكل التالي:
CODE

@media screen and (max-width:1280px) {
 // CSS STYLE FOR DESKTOP

 } @media screen and (max-width:900px) { 
// CSS STYLE FOR TAPLETS
 } 
@media screen and (max-width:736px) { 
// CSS STYLE FOR PHONES
 } 
@media screen and (max-width:300px) { 
// CSS STYLE FOR SMALL PHONES
 }


اضافة إلى أنه يجب أن تضيف كود meta viewport في ما بين وسم head في قالب headinclud الخاص بالأستايل
لتعمل خاصية التجاوب على أجهزة المحمولة كهواتف
CODE
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> ​ 


لمزيد من التفاصيل شاهد ملف style.css للأستايل الافتراضي للنسخة او لأي ستايل آخر متوافق اجهزة الجوال السابق ذكرها في ردي السابق


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

موفق smile

look/images/icons/i1.gif [ طلب شرح ] كيف اجعل الاستايل يتوافق مع الجوالات
  17-01-2017 01:29 صباحاً   [6]
معلومات الكاتب ▼
انضم في : 23-08-2016
رقم العضوية : 6,837
المشاركات : 507
الدولة : المملكة العربية السعودية
الجنس :
تاريخ الميلاد : 17-9-1999
الدعوات : 2
قوة السمعة : 1,090
يشيخ وش اقول وكيف اقول ...!

يعطيك الف عافية يالامير ...2flw5
ويعطيك العافية على شرحح ان شاء الله ابدع فيه ..


805681

... # Close ..



المواضيع المتشابهه
عنوان الموضوع الكاتب الردود الزوار آخر رد
[مجابه] كيف اجعل صورة القسم عند الضغط عليها تنقلني له jeiro33
10 1655 AHMED
[مجابه] ماهو قالب معلومات الكاتب وكيف اخططه واجعله مميز jeiro33
2 904 isma3eliano
[مجابه] كيف اجعل اسم العضو عريض او مائل jeiro33
4 804 عبد العزيز
[مجابه] كيف اجعل المجلة هى الصفحة الرئيسية ebrimnubian
3 799 نجم الويب
[مجابه] كيف اجعل الروابط مغلقه امام الزوار hamza_joker
3 1016 AHMED

الكلمات الدلالية
اجعل ، الاستايل ، يتوافق ، الجوالات ،









الساعة الآن 05:01 PM