Change site style→

style-1 style-2
  1. nazenani
  2. >
  3. >
  4. >
  5. Smartphone coding

Smartphone coding

Setting Viewport

Set display in smartphone.

Template

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

Setting information

Property Value(PC) Value(LL) Value(RWD)
width about 980px device-width device-width
height auto auto auto
initial-scale auto 1 1
user-scalable yes no no
minimum-scale 0-10
maximum-scale 0-10

Device-pixel-ratio

Ratio of width on browser to width of screen.
Almost it’s 1:2.
Web design kampf will be design at screen size, won’t browser size.

Point of making.
  • Slice image design size.
  • Width and height of img tag are setted half of actually slice size.
  • Margin, fonts, all elements are setted half size of design kampf.

Liquid Layout

The layout which change block width to the width fitting browser.

Point of making.
  • Setting width by “%”

Responsive web design

Control web site of various device by one source.

Point of making.
  • Use media queries
  • Handle dropping columns.
  • Handle “display” property

Media queries

Above example set CSS blow…
h1 font color is #000 while media width 500px-600px.

Common regulation

  • Set font size by pixel.
  • Use html5.

comment

Fields with * is required.

go to related tags archive?