FAQ How to

show Changed

Changed

Visitor's book Site map pmwiki-2.7.5 5601

• login  

Going Mobile

View from track between A6 and A1 courses

📷 Adrian

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