یکی از سایت‌های e-commerce که برای خیلی از سایت‌های دیگر می‌تواند نمونه باشد سایت آمازون می‌باشد.

نمای desktop

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

این نما در حالت موبایل تغییر می‌کند. حتی با لب تاب هم نمی‌توانید حالت موبایل را تجربه نمایید:

پس باید این موضوع را در طراحی ها در نظر گرفت که حالت موبایل در دیباگر مرورگر به راحتی به دست نمی آید.

مگر اینکه از یه extension مثل SIMPLE MODIFY HEADERS استفاده کنید.

نمای موبایل

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

با استفاده از پلاگینی که پیش‌تر معرفی کردم تغییر User-Agent به مقدار زیر، می‌توان نمای تغییر موبایل در اندازه‌های گوناگون را واضح‌تر مشاهده نمود:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3 lk