نحوه ریسپانسیو بودن دیجی کالا و فرق آن با سایت های دیگر

سلام و خسته نباشید


الان وقتی با مرورگر کامپیوتر وارد دیجی کالا میشی و هر چقدر هم اندازه مرورگر رو تغییر میدی و سایز مرورگر رو پایین میاری قالب دیجی کالا اصلا حالت ریسپانسیو رو به خودش نمیگیره
ولی
وقتی با گوشی وارد سایت میشی کاملا ریسپانسیو هستش و کد ها مختص موبایل هستش .
من میخوام بدونم این رو چطوری تشخیص میده ؟

وقتی با مرورگر کامپیوتر وارد سایت های ریسپانسیو دیگه میشی و اندازه مرورگر رو تغییر میدی و سایز مرورگر رو پایین میاری قالب سایت حالت ریسپانسیو رو به خودش میگیره.
ولی دیجی کالا اینطور نیست.

دیجی کالا از کجا میفهمه که تو کامپیوتری یا موبایل ؟
اینو چطوری تشخیص میده؟


ممنون از لطفتون

نقل قول:

---

نوشته شده توسط hamidrezawd

سلام و خسته نباشید


الان وقتی با مرورگر کامپیوتر وارد دیجی کالا میشی و هر چقدر هم اندازه مرورگر رو تغییر میدی و سایز مرورگر رو پایین میاری قالب دیجی کالا اصلا حالت ریسپانسیو رو به خودش نمیگیره
ولی
وقتی با گوشی وارد سایت میشی کاملا ریسپانسیو هستش و کد ها مختص موبایل هستش .
من میخوام بدونم این رو چطوری تشخیص میده ؟

وقتی با مرورگر کامپیوتر وارد سایت های ریسپانسیو دیگه میشی و اندازه مرورگر رو تغییر میدی و سایز مرورگر رو پایین میاری قالب سایت حالت ریسپانسیو رو به خودش میگیره.
ولی دیجی کالا اینطور نیست.

دیجی کالا از کجا میفهمه که تو کامپیوتری یا موبایل ؟
اینو چطوری تشخیص میده؟


ممنون از لطفتون

---

زمانی که یک صفحه یا فایل وب رو میخواهیم دریاقت کنیم یکسری اطلاعات که بهشون Header میگن به همراه درخواست ارسال میشه.
یکی از این Header ها که اسمش User-Agent ئه مشخصاتی از سیستم عامل، نوع و نسخه مرورگر، سخت افزار و ... کاربر رو شامل میشه.
فرضا این یکسری User-Agent های شناخته شده است که بصورت یک رشته (string) توسط مرورگر ها ارسال میشه، در سطر قبلی هر کدوم مشخص کردم که ارسال کننده چیه :

Samsung Galaxy S9

Mozilla/5.0 (Linux; Android 8.0.0; SM-G960F Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.84 Mobile Safari/537.36



Samsung Galaxy S8

Mozilla/5.0 (Linux; Android 7.0; SM-G892A Build/NRD90M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/60.0.3112.107 Mobile Safari/537.36



Nexus 6P

Mozilla/5.0 (Linux; Android 6.0.1; Nexus 6P Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.83 Mobile Safari/537.36



Sony Xperia XZ

Mozilla/5.0 (Linux; Android 7.1.1; G8231 Build/41.2.A.0.219; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/59.0.3071.125 Mobile Safari/537.36



HTC One X10

Mozilla/5.0 (Linux; Android 6.0; HTC One X10 Build/MRA58K; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/61.0.3163.98 Mobile Safari/537.36



Apple iPhone XR (Safari)

Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1



Apple iPhone XS (Chrome)

Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/69.0.3497.105 Mobile/15E148 Safari/605.1



Apple iPhone X

Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1



Apple iPhone 8

Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1



Microsoft Lumia 650

Mozilla/5.0 (Windows Phone 10.0; Android 6.0.1; Microsoft; RM-1152) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Mobile Safari/537.36 Edge/15.15254



Samsung Galaxy Tab S3



Mozilla/5.0 (Linux; Android 7.0; SM-T827R4 Build/NRD90M) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.116 Safari/537.36



Windows 10 (Edge)

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.246



Mac OS (Safari)

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/601.3.9 (KHTML, like Gecko) Version/9.0.2 Safari/601.3.9



Windows 7 (Chrome)

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.111 Safari/537.36



Linux (Firefox)

Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:15.0) Gecko/20100101 Firefox/15.0.1

هر سروری از هر نوع پلتفرمی که باشه میتونه این User-Agent رو بخونه و متن داخلش رو پردازش کنه، فرضا بفهمه چه نرم افزاری است یا سیستم عاملش چیه، نسخه اش قدیمی است یا جدید و ...
نیازی هم نیست در سمت سرور باشه، در کد سمت کلاینت هم همینکار رو میشه کرد.
فرضا در Javascript با navigator.userAgent میشه این رشته رو دریافت کنیم :

<script> document.write(navigator.userAgent); </script> 

هر مرورگر اینترنتی متعارفی در مشخصاتی که موقع درخواست میفرسته این User-Agent رو میفرسته، مگر اینکه فرضا ازش بخواهید که نسخه Desktop رو نشون بده که اون موقع مرورگر وانمود میکنه که یک مرورگر تحت Desktop ئه، یعنی User-Agent تقلبی میفرسته.
دیدید که بعضی سایت ها وقتی با یک مرورگر خاص یا نسخه قدیمی واردشون میشید بهتون پیام میدن که مرورگر تون رو تغییر بدید؟ اونها هم معمولا به همین ترتیب با کد JavaScript محتویات User-Agent رو بررسی می کنند تا دنبال کلمات کلیدی خاصی که مربوط به اون مرورگر ئه بگردند.
اونها بعد پردازش User-Agent تصمیم میگیرند که در صفحه چه JavaScript هایی اجرا بشه، چه CSS هایی اعمال بشه و ... به این ترتیب میتونند وضعیت صفحه وب رو برای پلتفرم های مختلف تغییر بدن.

سلام
تشکر فراوان بابت راهنمایی
الان بین سایت های ایرانی زیاد میگردم فقط دیجی کالا از این ترفند برای ریسپانسیو کردن استفاده کرده
برای مثال
الان شما با مرورگر کامپیوتر برید داخل سایت آپارات و اندازه مرورگر رو کوچیک کنید .
مشاهده می کنید که با کوچیک کردن مرورگر نسخه موبایل آپارات نمایش داده میشه .

به نظر شما مثل دیجی کالا عمل کنیم خوبه یا مثل بقیه سایت های دیگه مثل آپارات .
شما کدوم روش رو پیشنهاد می کنید .
ممنون از لطفتون

از نظر من خیلی هم خوبه که با توجه به اندازه صفحه عمل کنیم. منظورم اینه که مهم نیست توی دسکتاپیم یا موبایل؛ در هر صورت باید کل صفحه رو ببینیم.