التكيف مع الموقع للأجهزة المحمولة: التعليمات خطوة بخطوة. إصدار موقع الجوال

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

معلومات عامة

لذا ، أولاً ، دعونا ننظر إلى ما هويمثل تصميم التكيف. هذا هو اسم التهيئة التي يتم فيها إرسال نفس كود HTML إلى جميع الأجهزة ، ولكن يتم ضبط حجم العناصر بواسطة CSS. يمكن لروبوتات البحث المختلفة التعرف على مثل هذه المواقع ، بشرط أن تكون الصفحات والموارد مفتوحة للمسح الضوئي. لإخبار المتصفحات لهذا الاحتمال ، يتم استخدام علامة اسم التعريف: "viewport". ما هو تكييف الموقع للأجهزة المحمولة؟

النظر في العلامة

لذا ، من الضروري أن تعتني بذلكmeta name tag = "viewport". ماذا؟ وهي تحتوي على تعليمات للمتصفح عن كيفية ضبط حجم وحجم الصفحة ، مع الأخذ في الاعتبار عرض شاشة الجهاز الذي يتم عرض الموقع منه. إذا لم تقم بإضافة هذا العنصر الصغير ، فستكون الصفحة الافتراضية هي الصفحة التي تم تصميمها لأجهزة الكمبيوتر. إلا أن متصفحات الجوال ستحاول تحسين المحتوى ، مما سيؤدي إلى زيادة الخطوط ، أو توسيع نطاق المحتوى ، أو عرض بعض المحتوى الذي يتسلق على الشاشة. هل هو لطيف؟ لا ، لن تتسبب النسخة المحمولة للموقع في هذه الحالة إلا في الإدراك السلبي. بعد كل شيء ، ستكون الخطوط غير متناسبة ، سيكون عليك تمرير الصفحة وتنفيذ سلسلة من الإجراءات التي ، رغم أنها ثانوية ، لا تزال مملة. تحقق من تكييف الموقع لأجهزة الجوال يمكن أن يستخدم الهاتف الذكي أو الجهاز اللوحي أو الخدمات والبرامج الخاصة. بالطبع ، الخياران الأولان أكثر تفضيلاً ، لكن إذا كنت بحاجة إلى تحليل دقيق من موقع أجهزة مختلفة وتوفير الوقت ، فستقوم الأخيرة بذلك.

ما هي مزايا تكييف الموقع للأجهزة المحمولة؟

يسمح استخدام هذا الأسلوب بما يلي:

1. يشارك المستخدمون المحتوى في الحالات التي يكون فيها لديه عنوان واحد.
2. خوارزميات محرك البحث الحصول على معلمات صفحة بالضبط ، وليس هناك ارتباك مع إصدارات مختلفة.
3. تقليل احتمال الأخطاء.
4. تقليل وقت التنزيل بسبب عدم إعادة الفهرسة.
5. حفظ الموارد.

بالإضافة إلى ذلك ، فإن الصفحة التكييفية هي أسهل في الإنشاء ،بدلا من عدة أنواع من شيء واحد. تكييف الموقع لأجهزة الجوال (للقيام بذلك من الممكن جدا) ليست شيئا من الصعب معرفة جافا سكريبت كافية وقادرة على العمل مع أوراق الأنماط المتتالية (CSS) والصور. هناك العديد من الطرق لإنجاز المهمة. كجزء من سينظر ثلاثة من الخيارات الأكثر شعبية في المقال:

1. التركيز على JavaScript.
2. الجمع.
3. استخدام ديناميكي لجافا سكريبت.

دعونا نعتبرها بمزيد من التفصيل.

التكيف باستخدام جافا سكريبت

في هذه الحالة ، يتم استخدام محتوى واحد. وباستخدام JavaScript ، يتغير التنسيق مع آلية الصفحة. كل شيء في مثل هذه الحالات يعتمد على النظام الأساسي. تشبه هذه الخوارزمية استعلامات الوسائط لورقة الأنماط المتتالية. النظر في مثال صغير من العمل في الممارسة. لذا ، لدينا صفحة تحتوي على كود HTML ، حيث يتم وضع عنصر <script>. عندما يتم طلبها ، فإنها سوف تنقل نفس البيانات. ولكن عندما يتعلق الأمر بمعالجة ، سيتأثر هذا بشكل كبير بخصائص الجهاز. وكنتيجة لذلك ، سيتم تغيير تنسيق الصفحة. وكمثال على ذلك ، يمكننا ذكر حالة الصورة ، التي سيتم تحسينها للعرض على الهواتف الذكية والأجهزة اللوحية ، وليس على أجهزة الكمبيوتر. من المزايا المهمة لهذا الخيار أن الكمبيوتر يتعرف على التنفيذ تلقائيًا. بالإضافة إلى ذلك ، لا تحتاج إلى الحصول على رأس خاص ، لأنه لا يوجد عرض محتوى ديناميكي.

مجموعة

في هذه الحالة ، فإن تكييف الموقع على الهاتف المحموليتم استخدام الجهاز بسبب الجمع بين إمكانيات جافا سكريبت ووظائف الخادم. كيف يبدو المخطط العام؟ يزور المستخدم الموقع من جهاز معين. جافا سكريبت يحصل على معلومات حول ما استخدمته ، ويمرره إلى الخادم. يقوم بإنشاء التعليمات البرمجية الضرورية ، ثم يتم إرسالها إلى الجهاز. ويتم تخزين المعلومات حول هذا في ملفات تعريف الارتباط. وفي الزيارة اللاحقة يقوم الخادم بقراءة البيانات منها. تكمن خصوصية هذا الأسلوب في إمكانية استخدام إصدارات مختلفة من شفرة HTML. ومع ذلك ، للتشغيل الصحيح ، من الضروري الاهتمام بوجود الرأس Vary: User-agent. النسخة المحمولة للموقع في هذه الحالة تتطلب المزيد من العمل.

ديناميكية جافا سكريبت وخيارات أخرى

في هذه الحالة ، من المتوقع أن يكون هناكقدمت نفس الرمز مع عنصر محدد ، والذي يشير إلى ملف خارجي يختلف محتواه بناءً على العامل الذي يتم استخدامه. بمعنى ، سيكون لدينا صفحة ديناميكية أمامنا. كيف يتم هذا؟ يستخدم العديد من الأشخاص الخيار نفسه: وكيل المستخدم لهذا. وعند العمل مع الصفحات ، سيتم أيضًا تحديث المعلومات في الوقت الفعلي ، وهو أمر جيد بالتأكيد. على النظرية ، لا يزال بإمكانك التحدث كثيرا. كيف لا تتذكر المغنيات (<div>) ، والتي يمكنك حرفيا "juggle" مظهر الموقع والكثير من الأشياء المختلفة الأخرى. ولكن بعد كل شيء ، نحن مهتمون بكيفية القيام بذلك!

التحضير للتنفيذ

تجدر الإشارة إلى أن هناك نهجين لمهمة إنشاء موقع تكيفي:

1. دليل.
2. التلقائية.

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

تخطيط مرن

من أجل قد حصلت على "يم" الحرفييجب استخدام وحدات قياس نسبية فقط. في الممارسة ، يتم تخصيص جميع الخطوط إلى em ، ويتم تحديد حجم العناصر بالنسب المئوية. على الرغم من أنه يمكنك بشكل دوري (إذا كنت تريد بالفعل) استخدام و px ، ولكن من الأفضل الاستغناء عنها. عند تحديد عرض أو ارتفاع ، يجب استخدام رقم ثابت ثابت مثل 1080 أو 1260 أو 768 ونسبة مئوية. على سبيل المثال - العرض: 90 ٪. يمكنك إجراء و 80٪ و 99٪ و 100٪. كل هذا يتوقف على رغبة السيد. ولكن ماذا عن النص الذي يظهر على عنصر معين؟ في هذه الحالة ، هناك صيغة واحدة جيدة جدًا: يتم تقسيم عرض الخط على نفس عامل مكون الخلفية ، ونحصل على مطالبتنا. في بعض الأحيان يحدث أن الأرقام يمكن أن تكون طويلة جدا. على سبيل المثال ، المعيار هو 1260. والمستخدمين الذين لديهم عرض شاشة 780 يدخلون. عند القسمة ، نحصل على رقم طويل جدا. هل من الضروري تقريبه؟ حسنا ، الوضع هنا معقد. كثيرون لا ينصحون بشكل قاطع. من الأفضل النظر إلى الموقف وتقييم مدى أهمية الدقة. يمكنك ، على سبيل المثال ، تعيينه ليأخذ بعين الاعتبار المنازل العشرية فقط ، ثلاثة ، أربعة أو عشرة. صدقوني ، هذه مهمة بسيطة ، هذا التكيف للموقع لأجهزة المحمول. CSS ، إذا كان يحتوي على مداخل بدون أخطاء ، يمكنه إعادة إنتاج كل شيء.

الخط المرن والصور واستعلامات الوسائط

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

1. 16/16 = 1 م.
2. 18/16 = 1،125 م.

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

والآن حول الصور. يمكنك إضافة كل شيء إما إلى سماتها أو إلى ورقة الأنماط المتتالية باستخدام الحد الأقصى للعرض. لا ننسى أن الحجم يعطى في المئة! وبضع كلمات عن استفسارات وسائل الإعلام. يمكن استخدامها في تلك الحالات عندما يكون من الضروري وضع شروط معينة. على سبيل المثال ، إذا كان عرض الشاشة أقل من 1260 بكسل ، فسيتم تطبيق القواعد المتداخلة في استعلام الوسائط. ماذا يمكن أن يفعلوا؟ إذا كان لدينا صورة خلفية جميلة ، والتي ينبغي عرضها تمامًا ، وكان للمستخدم شاشة صغيرة ، في مثل هذه الحالات ، يمكنك أن تقرر إزالتها. بطريقة ما ، تتشابه استعلامات الوسائط مع العبارة if. لكن خصوصياتهم كبيرة جدا ... الفردية. يمكنهم تسجيل جميع التغييرات التي يجب إجراؤها عند العمل مع المتصفحات ذات الأحجام المعينة.

استنتاج

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