EW Resource

V4 SP2 Mobile Snippets

Back to the Mobile Web Design page

 

V4 SP2 Mobile SnippetsThis collection contains six snippets for mobile-friendly site development.

Hint

You always need to work in Code view (or the code part of Split view) when working with snippets

Downloadable from the Snippets page

Also vailable - a mobile responsive template for EW

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/