Mobile Magic

Submitted by nick on Thu, 2012/03/01 - 10:04
in

Yesterday I discovered a migic little for making mobile-friendly sites, its the viewport meta tag. It goes something like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

It tells the browser to set the page width to the same size as the targets screen (I am pretty sure it gets mostly ignored on desktop browsers)
This allows you to create variable width pages that will look right on almost any size of screen. Though there are still a few more tricks to perform to make everything look right all of the time. Head on over to HTML5 Rocks for more info.

Bookmark/Search this post with:
  • del.icio.us
  • Digg
  • Facebook
  • MySpace
  • Reddit
  • StumbleUpon
  • Technorati
  • Twitter

Comments

It gets better!

Submitted by zourtney on Thu, 2012/03/01 - 17:06.

It gets even better with CSS media queries in the stylesheet itself. First, device-width selectors!

@media screen and (max-width: 320px) {
  /* mobile formatting */
}

Let's say you want to format the page differently based on device orientation:

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
}

Want to get crazier? device-pixel-ratio selectors can detect high-resolution displays (ie iPhone retina, Galaxy Nexus display).

@media screen and (min-device-pixel-ratio: 2) {
  /* high-res */
}

There's a bunch more I don't know how to use...yet!

See also:

Supporting high-dpi...with CSS or IMG
How to use CSS3 Orientation Media Queries

 

Yups! It gets crazier the

Submitted by nick on Thu, 2012/03/01 - 17:11.

Yups! It gets crazier the more you want to fine tune it. So far all I have done is make a mobile friendly front page for the forums. Works on any display size over about a width of 200px I would think (its just a 100% variable width) and looks snazzy enough for my taste. I will throw it up some time after I get a chance to put a few finishing touches on it. Then I will have to make one for all the viewing pages and the signup page and the like.