devXero's blog

a blog about agile, development, and automation

Posts Tagged ‘iPhone’

Mobile Browser Sniffing

Posted by Mike Longin on August 10, 2010

For my internal site, I wanted to give it the ability to display an version specific for mobile browsers. To do this required the ability to sniff our a mobile browser. Initially I was using the provided .Net command for verifying if the accessing browser was a mobile browser.

Request.Browser.IsMobileDevice

However while this works great for the iPhone this did not work at all for Android based devices. After a large amount of searching I found the MobileESP open source project (http://code.google.com/p/mobileesp/) for determining if a browser is from a mobile device. Initially I used thier entire code base. However I felt that solution was too bulky and I ended up just finding the code for locating an Android based device and using that instead.

Request.UserAgent.ToLower().IndexOf("android") != -1

Even if you do not need their entire code base, the project is a great repository for determining how to identify any mobile based browser

Advertisements

Posted in Uncategorized | Tagged: , , , , , | Leave a Comment »

Creating an iPhone\droid friendly website

Posted by Mike Longin on August 10, 2010

For an internal tool I recently created an iPhone\Android friendly version of one of my sites.  Considering the plethora of CSS styling sites you would think at least one or two would have some easy layouts for mobile devices.  Unfortunately this was not the case.  However I did find (http://net.tutsplus.com/tutorials/html-css-techniques/flexible-mobile-first-layouts-with-css3/) which made creating my mobile app super easy.  Creating a mobile site comes down to two things.  Having the Viewport Metadata and having a valid CSS file.  Another useful site (http://eisabainyo.net/weblog/2009/06/12/making-a-website-iphone-friendly-using-css/)

Meta Tag

This tag is needed to help autofit the page and to prevent zooming.  (If you ever wondered why some sites on the iPhone do not zoom, this is the answer)


<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

CSS

To create my app I copied the layout here

I used essentially the same css as available on the above site.  The most important note I did find in my research however, is not to use fixed widths, and instead to use percentages.

Icon

For websites designed for mobile browsing, it is important to have a custom bookmark icon.  This way if someone saves the bookmark to thier home screen it stands out.  The two site below cover how to do this

http://eisabainyo.net/weblog/2009/06/12/making-a-website-iphone-friendly-using-css/

http://stackoverflow.com/questions/1951381/configuring-android-web-applications

In short you need to have these two tags

<link rel="apple-touch-icon" href="../../apple-touch-icon.png" />
<link rel="apple-touch-precomposed" href="../../apple-touch-icon.png" />

Inspirations

A great site for mobile app inspirations is http://cssiphone.com/.  I attempted to make my site look like these (didn’t really succeed however.)

Posted in Uncategorized | Tagged: , , , , , | Leave a Comment »