SharePoint 2010 Mobile Site - A Clever Work-Around

If you're faced with a challenge of attempting to accommodate mobile browsers on your SharePoint site, you've probably encountered a frustrating limitation of SharePoint - the "scaled, mobile edition", which is stripped to text-only browsing within SharePoint sites, lists, etc. I've read of ways to conquer this via mods to the web.config, but this solution unfortunately wasn't a good fit in my case, as I was limited to designer access only to the SharePoint collection (No back-end access what-so-ever). If this headache is / was yours as well, please read on!

SharePoint uses a "homepage" flag to determine which page within a site should be the landing page. This feature can be utilized to your advantage. These are the steps that allowed me to arrive at victory (Noting that the scenario is using a SharePoint 2010 site as a public facing website):

• Create a document library, allowing Anonymous the right to view all objects (I would advise breaking inheritance and manually setting the privilege, as inheritance doesn't usually work for Anonymous rights)
• Upload any graphics needed for the mobile version of the site into this library
• Create an html or aspx page within the library that will be the new mobile homepage (This would be the page you would like mobile visitors to see)
• Create a "dummy" html page that is blank, but contains some basic Javascript to re-route, based on the detected browser (Code sample further below)
• Right click the "dummy" html page and select "Set as Home Page"
• *Note - it's key to setup this "special document library" and nest the landing page inside it, as simply rerouting to your full version homepage triggers an authentication challenge on mobile browsers without tweaking the web.config

This does assume that the domain or DNS entry connecting to SharePoint is pointed without targeting a specific page, but rather a site. This will effectively bypass the "mobile version" of SharePoint and allow you to control the UX with much more granularity. Just be sure to hook the function into the onLoad handler. Enjoy!

function mobileCatch()
{
if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1) || (navigator.userAgent.indexOf('Mobile') !=-1))
{
location.href='MobileWebSite.aspx';
}
else
{
        location.href='FullWebSite.aspx';
}
}