The Mobile Ready HTML5 MVC project template is a template I created to speed up my team's jQuery mobile learning curve and development using the API.
While some of the team members had lots of experience using jQuery, no one have ever used the mobile version.
The template setup is easy.
1. Download the template extension from visualstudiogallery.com
2. Create a Mobile ready project using file, new, project "watch Video for more help"
Points of interests:
- In the project's Web.config App settings
<add key="HasMobileSpecificViews" value="true"/>
<add key="MobileViewsDirectoryName" value="M"/>
The HasMobileSpecificViews setting is used to determine if the application has mobile specific views.
When set to false, all mobile views will be ignored.
The MobileViewsDirectoryName is used to determine the location of the application mobile views.
The default value is set to M.
- Due to the complexity of debugging client script on mobile devices;
I created an extension method "IsSupportedMobileDevice" in the Application helper class.
We used this method to enable browsing the mobile views in firefox and debug client scripts using firebug.
To enable client script debugging using firefox and firebox modify this method to return false as shown in the comment
public static bool IsSupportedMobileDevice(this HttpRequestBase request)
//return true to enable debugging client script in firebug
bool isMobile = request.Browser.IsMobileDevice;
string userAgent = request.UserAgent.ToLowerInvariant();
isMobile = isMobile || (userAgent.Contains("iphone")
|| userAgent.Contains("windows ce")
|| userAgent.Contains("opera mini")
We are using iBBDemo to emulate iPhone and iPad devices, you can download this tool from http://www.puresimstudios.com/ibbdemo/
It's best to view the video in full screen mode :-)