متصفح Safari على iOS لا يحمّل النسخة المحمولة لمكون السمة؟

الدعم
1

لدي مكون سمة، يحتوي على CSS و Head معرفين لكل من سطح المكتب والجوال.

على الجوال، يتم تعريف شكل أصغر للمساحة.

يعمل بشكل جيد على كروم وفايرفوكس على الآيفون، ولكن في سفاري، يتم تحميل إصدار سطح المكتب بدلاً من ذلك.
متصفح سفاري لا يقوم بتحميل إصدار سطح المكتب للموقع.
هل رأى أحد هذه المشكلة؟ هل متصفح سفاري للجوال بنظام iOS لا يُعرّف نفسه كمتصفح جوال؟ أو …

شكرا

2

تأكد أولاً من أنه عن طريق إجباره على عرض الهاتف المحمول، ضع هذا في نهاية عنوان URL:

https://example.com?mobile_view=1

قد لا تكون المشكلة كما تعتقد …

يجب عليك أيضًا تحديد إصدار Safari الذي تستخدمه؟

إعجاب واحد (1)
3

شكرا @merefield

  • إنها سفاري على نظام iOS 17.1.2، عند تحميل المكون، تظهر الشكل الكبير المحدد لسطح المكتب
    تم تحديث نظام iOS للتو إلى أحدث إصدار 17.2.1، نفس الشيء.
  • على نفس الجهاز، إذا تم فتحه باستخدام كروم أو فايرفوكس، فإنه يظهر الشكل الصغير المحدد للهاتف المحمول
  • على متصفح سطح المكتب، إذا تم عرضه https://example.com?mobile_view=1، فإنه يظهر الشكل الصغير المحدد للهاتف المحمول.

أشك في أن هناك شيئًا ما يقوم متصفح سفاري الخاص بي بتحميل محتوى سطح المكتب، ولكنه ليس كذلك، لنقل أنه يقوم بتحميل تخطيطات الهاتف المحمول، وليس إصدار سطح المكتب.
لم ألاحظ هذا من قبل، ربما كنت أستخدم كروم في معظم الوقت على الآيفون…

لإعادة إنتاج المشكلة، قمت بإنشاء هذا الإصدار المبسط لإظهار المشكلة.

  • هذا الكود النموذجي أدناه يعرض بشكل أساسي دائرة حمراء كبيرة في متصفح سطح المكتب، ودائرة أصغر في متصفح الهاتف المحمول.
  • بعد تثبيت هذا المكون، يمكنك أن ترى
    إنه يعرض الدائرة الصغيرة على كروم/فايرفوكس الآيفون، وهذا متوقع
    ولكن دائرة كبيرة كما هو محدد لمتصفح سطح المكتب. هذا غير متوقع
  • قم بإنشاء مكون سمة، وأضف المحتويات أدناه
    image
    image999×567 55.6 KB

سطح المكتب

CSS

.deng-box1 {
    position: fixed;
    top: -30px;
    left: 180px;
    z-index: 1999;
}
 
.deng-box1 .deng {
    position: relative;
    width: 120px;      // حجم أكبر !!!
    height: 90px;       // حجم أكبر !!!
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 5s infinite ease-in-out;
    animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}

Head



---

### الهاتف المحمول
#### CSS

.deng-box-mobile {
position: fixed;
top: 180px;
left: -40px;
z-index: 1999;
}

.deng-box-mobile .deng {
position: relative;
width: 60px; // حجم أصغر!!!
height: 45px; // حجم أصغر !!!
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}


#### Head
إعجاب واحد (1)
4

أقترح تغليف هذا على GitHub لجعل الأمر سهلاً للغاية للأشخاص للتحقق منه…

5

ماذا يحدث إذا وضعت سلسلة الاستعلام هذه على متصفح سفاري للجوال؟

6

بهذه الطريقة مع ?mobile_view=1، يتم تحميل الإصدار المتوافق مع الجوال في متصفح سفاري على الآيفون
هممم…

سأضعه في مستودع لتسهيل التجربة/التصحيح… شكرًا لمساعدتك!

7

آه، وقبل ذلك لم يكن كذلك؟ هذا مثير للاهتمام!

تحت الإصدار 17.3 (PB)، أرى الإصدار المتوافق مع الجوّال الخاص بـ TC الخاص بي على جهاز iPhone 11 الخاص بي دون الحاجة إلى فرضه (باستخدام هذا الاستعلام).