viewport

Viewport is an effective screen size for a mobile device. Use a special meta tag in the html header to tell mobile devices how many pixels to fit into its screen. Each device defaults to a default setting. Width should be equal to or slightly larger than your web content to ensure a little bit of margin next to your text for readability.

<meta name="viewport" content="width=1024">

You can also set the viewport width to the same as the mobile devices native screen resolution.

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

Initial scale tells iphones and ipads not to scale to its default 980 px. Maximum scale previews users from zooming in.

css media queries

Conditional statements for CSS which you can use to target specific devices. You can point to different stylesheets depending on the media type and screen size. Or you can use conditional statements embedded in css to target media types and screen size.

@media handheld, screen and (max-device-with: 480px) {
    body { width: 100% }
  }
  @media screen and (min-width: 481px) and (max-width: 1024px) {
    body { width: 100%; }
  }
  @media screen and (min-width: 1025px) {
    body { width: 100%; }
  }
  @media print {
    body { width: 100%; }
  }

This builds css to target mobile phones, tablets and computers.

comments powered by Disqus