اندازهی قلم متن
تخمین مدت زمان مطالعهی مطلب:
یک دقیقه
برای شروع، پروژهای از نوع 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)ذخیره کنیم.
اگر Extension ای را برای تست شبیه سازی محیط موبایل یا تبلت، نصب کنید، میتوانید آن را مشاهده کنید.
حال میتوان برای شکیلتر کردن آن از نیوگت jquerymobile را گرفته و طبق مطالب گفته شده از صفحه Layout خود هم چند نمونه برای مرورگرهای مختلف درست کرده وبا jquerymobile روی آن کار کنید.