V4 SP2 Mobile Snippets

Back to the Mobile Web Design page

 

This collection contains six snippets for mobile-friendly site development.

Downloadable from the Expression Gallery

The first of these adds CSS3 @media query blocks for 'Mobile Portrait', 'Mobile Landscape' and 'Tablet Portrait' sizes that enable a layout to respond to the size of the viewing device.

The second adds a 'shim' that enables browsers that don't support the @media queries to do so. Some mobile devices still use older browsers that need this. The first version of Windows Phone 7 used a mobile version of IE7 for instance and some versions of Opera Mini also need this. For full details of this shim see:

https://github.com/scottjehl/Respond/

For more background on 'Responsive Web Design' see:

http://www.webdesignshock.com/responsive-web-design/ and 

http://www.alistapart.com/articles/responsive-web-design/

 

The third and fourth snippets are used for iOS devices (Apple iPod, iPad and iPhone) to ensure they scale a web page and text correctly when switching from portrait to landscape mode. You'll need the meta tag on every page.

 

The fifth and sixth snippets are for using jQuery Mobile and you need to be familiar with that before using them. The snippets includes CDN links to jQuery, jQuery Mobile and stylesheet for jQuery Mobile. See http://jquerymobile.com/