1

I have learnt some basics about developing iOS apps and curious to learn more. I recently came across the way websites are displayed on mobile and was willing to know as to are there are particular design patterns/methods supporting it. I tried opening walmart.com on mobile which gives same display of the website as on the screen, but if I open homedepot.com; the view I get on mobile is an optimized one.

How does this work? How do I get same/optimized display for different devices i.e. desktop screen, ipad or iphone??

tech_human
  • 6,592
  • 16
  • 65
  • 107

2 Answers2

2

There are several ways:

  • use the browser agent information and serve the customized files (html, css, js, etc) for that client (Generally, not recommended)
  • use the browser agent or screen-width to redirect to a mobile-specific site (what a lot of sites do; relatively easy)
  • do responsive design, which essentially uses screen-widths and css to custom the display of a site, This also has a nice side effect of responding to window resizes for a desktop browser. But this method requires more work than a mobile-specific site.

Any of the methods above usually require some mobile-specific things, such as meta tags:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

This tells the mobile browser to set the page width to that of the screen, and prevent zooming.

For responsive design, you can use a css framework like 320-and-up to help. It's also a good reference to see how various mobile stuff can be done.

For a mobile-specific site, something like jquery-mobile can help a lot.

Community
  • 1
  • 1
Jeff
  • 5,013
  • 1
  • 33
  • 30
1

You can detect the type of browser that's loading your page and redirect to your mobile-optimized URL. You should probably make both the mobile-optimized and the full version of the site accessible to mobile users (see: www.progressive.com).

Google something like "iphone optimized website tutorial" to learn how.

Scott Austin
  • 356
  • 1
  • 4