Question

@Phill Pafford gave the solution for my oposite problem: jquery mobile default font size using the meta viewport solution. But, this is great for up-sizing the viewport to adapt to a phone screen.

I’m implementing jQM framework only to give a mobile look-n-fell on a “regular” Web-based App that runs on computer screens. And the font looks very big on them! How can I globally down-size the font-size or adapt it (responsive design) to be more appealing (i.e. smaller) on a computer screen?

Thanks!

Answer 1

In your custom stylesheet, not the JQM stylesheet, group your styles with media queries:

/* Large desktop */
@media (min-width: 1200px) { font-size: 12px; }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }