برای شروع، پروژهای از نوع InternetApplication را انتخاب نموده مطابق شکل زیر:
سپس اگر صفحه Layout.cshtml_ باز کنید، با متا تگی به فرم زیر روبرو میشوید که توسط آن میتوانیم اندازه صفحه نمایش را مشخص کنیم:
زمانیکه Request ای صادر میشود، موارد ذیل تشکیل خواهند شد:
اگر دقت کنید در قسمت User-Agent یکسری مشخصات از سیستم نمایان است که ما طبق آن میتوانیم صفحه مربوطه را بارگذاری کنیم.
سپس اگر صفحه Layout.cshtml_ باز کنید، با متا تگی به فرم زیر روبرو میشوید که توسط آن میتوانیم اندازه صفحه نمایش را مشخص کنیم:
زمانیکه Request ای صادر میشود، موارد ذیل تشکیل خواهند شد:
اگر دقت کنید در قسمت User-Agent یکسری مشخصات از سیستم نمایان است که ما طبق آن میتوانیم صفحه مربوطه را بارگذاری کنیم.
سپس میبایست به فایل Global.asax رفته و تنظیماتی را در Application Start اعمال کنیم:
protected void Application_Start() { AreaRegistration.RegisterAllAreas(); WebApiConfig.Register(GlobalConfiguration.Configuration); FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); RouteConfig.RegisterRoutes(RouteTable.Routes); BundleConfig.RegisterBundles(BundleTable.Bundles); AuthConfig.RegisterAuth(); InitializeDisplayModeProvider(); } protected void InitializeDisplayModeProvider() { var phone = new DefaultDisplayMode("Phone") { ContextCondition = ctx => ctx.GetOverriddenUserAgent() != null && ctx.GetOverriddenUserAgent().Contains("iPhone") }; var mobile = new DefaultDisplayMode("Tablet") { ContextCondition = ctx => ctx.GetOverriddenUserAgent() != null && ctx.GetOverriddenUserAgent().Contains("iPad") }; DisplayModeProvider.Instance.Modes.Insert(0, phone); DisplayModeProvider.Instance.Modes.Insert(1, mobile); }
حال میبایست Pageهای مربوط به هر کدام را طراحی کرده و با پسوند مثلا (Phone-Tablet)ذخیره کنیم.
حال میتوان برای شکیلتر کردن آن از نیوگت jquerymobile را گرفته و طبق مطالب گفته شده از صفحه Layout خود هم چند نمونه برای مرورگرهای مختلف درست کرده وبا jquerymobile روی آن کار کنید.