Geek Answers Handbook

Redesign an existing web page using mobile CSS

What's a good way to add CSS for mobile to an existing webpage?

Requirements:

  • Viewing a non-mobile browser should remain as it is
  • Mobile browsers should get different CSS (which removes certain elements and simplifies the page)
  • Mobile browsers of interest: iPhone and Android. Win7 and webOS would be good to use
  • The fewer the number of changes, the better

I look at the HTML5Mobile template and various other solutions in the long run, but for a short time I am looking for a low-level CSS-based solution.

I hope for a solution only on the client side (as opposed to serving another page).

Recommendations? Is there a library / article / code snippet that will help me?

+4
source share
2 answers

The best way to handle this is with CSS multimedia queries that allow you to serve different stylesheets for different browser resolutions and capabilities. One of the main advantages is that you do not need to take a snapshot of the browser or any server code, which is a nightmare to support when dozens of new devices appear on the market every month.

While browser sniffing will require you to add a special discovery code to your script for each type or grouping of devices, media queries even handle devices you have never heard of.

As a far-fetched example, this will make your page have hot pink text in mobile browsers and small screens:

@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px) { body { color: hotpink; } }

Many good examples of using media queries:
http://responsivewebdesigns.tumblr.com/

+7
source

The best way to do this is to use php to return another css for different browsers.
Example:

 <?php header("Content-type: text/css"); $browser = get_browser(); if($browser['platform'] == 'iPhone') readfile("iPhone.css"); else readfile("normal.css");

Edit:
You can do this on the client side. to detect client in javascript you can use

 if(navigator.userAgent.match(/iPhone/i))

or something similar for other platforms. To enable specific css, you need jQuery to include many plugins, and then use:

 $.include('somecss.css');

Together:

 <script> if(navigator.userAgent.match(/iPhone/i)) $.include('iPhone.css'); else $.include('Other.css'); </script>
-3
source

More articles:


All Articles