الخلفية في الهاتف غير متناسقة

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

يمكنك تجربة حله  باستخدام css:

body {
    background-size: cover;
}

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

يمكنك أيضا تجربة contain بدلا من cover إذا كنت ترغب في ضمان ظهور الصورة بالكامل دون قطع، ولكن قد يتسبب ذلك في ظهور بعض الفراغات الفارغة في بعض الأحيان.

body {
    background-size: contain;
}

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

ولكى تقوم بالتعديل على موقعك حتى يصبح متجاوب استخدم هذا الكود:

@media screen and (max-width:992px){
/*
ضع هنا أكواد css
*/
}

@media screen and (max-width:768px){

}

@media screen and (max-width:640px){

}

@media screen and (max-width:320px){

}

و يمكنك أن تطلع أكثر على الموضوع من خلال هذه المقالات:

بتاريخ منذ ساعة مضت قال Chihab Hedidi:

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

يمكنك تجربة حله  باستخدام css:

body {
    background-size: cover;
}

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

يمكنك أيضا تجربة contain بدلا من cover إذا كنت ترغب في ضمان ظهور الصورة بالكامل دون قطع، ولكن قد يتسبب ذلك في ظهور بعض الفراغات الفارغة في بعض الأحيان.

body {
    background-size: contain;
}

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

ولكى تقوم بالتعديل على موقعك حتى يصبح متجاوب استخدم هذا الكود:

@media screen and (max-width:992px){
/*
ضع هنا أكواد css
*/
}

@media screen and (max-width:768px){

}

@media screen and (max-width:640px){

}

@media screen and (max-width:320px){

}

و يمكنك أن تطلع أكثر على الموضوع من خلال هذه المقالات:

 

شكرا لك حقا لا أعرف كيف ارد لك الجميل شكرا