تعزيز تجربة موقع الهاتف المحمول: فرض الاتجاه الأفقي وتعطيل التدوير التلقائي

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

حل CSS

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

1. قم بإنشاء ورقتي أنماط: style_l.css للأفقي وstyle_p.css للصورة الشخصية.
2. في style_l.css، قم بتضمين الأنماط الخاصة بالأفقي التي يتم عرضها محتوى الموقع بالعرض الكامل.
3. في style_p.css، قم بإخفاء جميع العناصر وعرض رسالة تطلب من المستخدمين إمالة أجهزتهم للعرض الأمثل.
4. أضف الكود التالي إلى قسم رأس HTML الخاص بك لاستخدام استعلامات الوسائط:

jQuery Solution[ يمكن أيضًا استخدام &&&]

jQuery لاكتشاف اتجاه الجهاز وتغيير وظائف الموقع وفقًا لذلك. إليك مثال:

$(window).on("orientationchange"، function() { إذا (window.orientation == 0 || window.orientation == 180) { // الاتجاه الأفقي // تمكين الميزات الخاصة بالمناظر الطبيعية هنا } else if (window.orientation == 90 || window.orientation == -90) { // اتجاه عمودي // إظهار رسالة لتدوير الجهاز } });

$(window).on("orientationchange", function() {
  if (window.orientation == 0 || window.orientation == 180) {
    // Landscape orientation
    // Enable landscape-specific features here
  } else if (window.orientation == 90 || window.orientation == -90) {
    // Portrait orientation
    // Show a message to rotate device
  }
});

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