Sunday, October 21, 2012

Adding jQuery Mobile support to a Sitefinity Content Page

If you are using a version or edition of Sitefinity that does not include the Mobile Device Support, odds are that you will need to leverage jQuery Mobile in your Sitefinity website in order to provide mobile device support.

Fortunately, this is a bit tricky but not that difficult overall:

  1. Open up your Sitefinity content page for editing
  2. Go into Title & Properties and add the following meta tag to the Advanced Options-->HTML Included in the <head> tag section: <meta name="viewport" content="width=device-width, initial-scale=1">
  3. Save your Changes
  4. Go back into Page Edit mode so that you can drag widgets into the Sitefinity Page
  5. You will need to add a CSS Widget and 2 JavaScript Widgets
  6. For the CSS Widget, link to the location of the jQuery Mobile .min.css file
  7. For the 1st JavaScript widget, link to the location of the jQuery .min.js file
  8. For the 2nd JavaScript widget, link to the location of the file
  9. Publish your resultant page
  10. View your published page and check to see if the rendering of the content in a mobile device has been improved

No comments:

Post a Comment