I’m working on my very first mobile specific design implementation (I know, I’m only like two years behind the times!).
The project has a mobile specific version (ie. it uses a whole different site for the mobile version). This site is an e-commerce site using CommerceV3 cart software, and it is challenging to look through the various template files to figure out what the markup of the pages is going to be. It would be much easier, I thought, if I could just ‘view source’ on the iPhone’s rendering of the site to see the markup.
How do you view source on the iPhone? There are several apps and bookmarklets that will do this, and for those I urge you to simple google “view source mobile Safari”.
The simplest thing for me turned out to be something I did not know about: you can use the desktop version of Safari to surf the web with a user agent alter ego! In Safari, choose Develop -> User Agent from the main menu.
There are choices there to view a site as Internet Explorer and Firefox (I have no idea how well those work, but I’m certainly intrigued by the possibility of cross browser testing with this feature), but the point here is that you can choose “Safari iOS” in a multitude of flavors, which allow you to view a site as if you were on an iPhone, iPod Touch, or iPad. Once the setting is turned on, start browsing, and you can view source for any mobile site you like!