CSS Set the font size on mobile devices / smaller screens.

Question

I noticed that some web pages are suitable for mobile devices. I know how to make positioning elements for mobile phones, etc. My problem is fonts. These mobilievices have a fairly high screen resolution. And the fonts are too small, due to the small screen.

Can I somehow increase the fonts on smaller screens?

Answer 1

In this case, you will need to display the retina screen. There are different ways to approach this. Most likely, you are making a fully responsive website, so I would recommend just making a media query to configure the hi-res retina and setting your font size, field coefficient, etc.

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

Source: css-tricks.com

Answer 2

You can use Media Queries to resize the font to fit the different widths of the current screen.

@media only screen and (max-width: 768px) {
   style-element {
      font-size: 20px;
   }
}

@media only screen and (max-width: 320px) {
   style-element {
     font-size: 10px;
   }
}

Take a look at these links:

http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

http://css-tricks.com/css-media-queries/

Answer 3

This media request is not dependent on mobile permission. It depends on the width of the device, suppose the width of the iphone is vertically 320 pixels and horizontally 480 pixels. Try this code

suppose you have a class

 .header{
    font-size:30px;        
 }

For mobile, I think your mobile width is 360 pixels * 640 pixels so try

 @media screen and (max-width: 360px) {
   .header{
       font-size:25px;
   }        
 }

 @media screen and (max-width: 640px) {
   .header{
       font-size:25px;
   }