يمكن أن تتخطى ورقة الأنماط لليد

Question

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

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

شكرا لك مقدما.

راي موند

Answer 1

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

.element { 
    background: #FFF url('image.png') no-repeat left top; /* or whatever */
}

بينما في ورقة الأنماط المحمولة ، لا تضع صورة خلفية ، لذلك ، اعتمادًا على الاستخدام الدقيق ، يمكنك استخدامه

.element {
    display: none;
}

أو

.element { 
    background: #FFF;
}

ومع ذلك ، لن يكون من الممكن إزالة الصور التي تتضمنها <img src="" /> بعد ذلك من خلال قواعد CSS (فقط display: none إلخ ، لكن هذا لن يمنعهم من التحميل ، كما لاحظت).

Answer 2

أرسل ورقة الأنماط الخاصة بك لكل رأس HTTP قبل الترميز:

Link: <compact.css>; rel="stylesheet"; media="handheld"

ثم لن يقوم المتصفح المحمول الأكثر استخدامًا - Opera - بتحميل الصور. ومع ذلك ، لا يزال WebKit (Safari) ، حتى - حتى صور الخلفية للعناصر المخفية!