FAQ How to

show Changed

Changed

Visitor's book Site map pmwiki-2.7.3 5577

• login  

Going Mobile

Adrian from Niseko An'nupuri

📷 Simon

Steps taken to make PmWiki skins mobile friendly

Set a viewport

• see size content to the viewport
• configure the viewport
• add <meta name="viewport" content="width=device-width, initial-scale=1"> to pmwiki.tmpl

Make all units relative

Make font-size relative using em

• use legible font sizes
  • Android typography guidelines
  • by default, the browser will display each font at 16px (CSS pixels), 1 pixel is 0.75 points
• change all font-size: xxpt; to font-size: yyem; (see conversion(approve sites))
• additionally changed all font-size: zzz%; to font-size: z.zzem;, strictly not necessary, but ensures that all font-size and identified by usage of "em"

Changed width of layout items

Make large elements relative, rather than fixed.

• size content to viewport
• sidebar width from px to em