Problem z rozmiarem czcionki gdy czcionka nie zapełnia całej szerokości div - a.

[kulek855]

Witam.
Problem z rozmiarem czcionki gdy czcionka nie zapełnia całej szerokości div - a.
Wszystko działa dobrze na komputerze. Problem pojawia się na telefonach i tabletach.

Gdy na mojej stronie wejdę na zakładkę "O mnie" oraz "blog" to wyświetlają się poprawnie. Natomiast po kliknięciu w zakładki "galeria" lub "kontakt" czcionka zostaje pomniejszona (menu też ma mniejszą czcionkę). Gdy czcionka zapełnia całą szerokość div -a (1100px) wtedy problem ustępuje.

Ktoś wie jak to poprawić?

http://danielwdowiak.pl/images/joomla/1.jpg

http://danielwdowiak.pl/images/joomla/2.jpg (http://danielwdowiak.pl/images/joomla/2.jpg)




@charset "utf-8";

* {padding:0;margin:0;}

html {width:100%;
height:100%;
}

body {
font-family: Open Sans,Arial,Helvetica,sans-serif;
font-size: 12pt;
color: #666666;
letter-spacing: 1px;
margin:0 auto;
max-width:1200px;
}

h1, h2, h3 {
font-weight: normal;
color: #666666;
}
h1 { font-size: 24px; }
h2 { font-size: 24px; }
h3 { font-size: 24px; }

p, ol, ul, blockquote {
line-height: 22px;}/* Tu zmieniamy odstep miedzy pionowymi wierszami. */

a:link {color: #666666; text-decoration: none;} /* Normalny, nieodwiedzony link. */
a:visited {color: #666666; text-decoration: none;} /* Link odwiedzony. */
a:hover {color: #CCCCCC;text-decoration: none; opacity:0.7;} /* Link po najechaniu nan mysza. */
a:active {color: #CCCCCC; text-decoration: none;} /* Link wcisniety. */

#menu ul.menu li{display: inline;}/* jak ma byc wyswietlane menu. */
.link a {padding: 0 0 0 40px; font-size: 29px; line-height: 60px; letter-spacing: 3px;} /* wyglad menu. */

/* Posts */
.post {
padding: 20px 40px 20px 60px;
}

.post h1, .post h2, .post h3 {
margin-left: 0px;
}

/*calosc*/
.container {width:95%;max-width:1100px;margin:0 auto;}

header {margin:25px 0;}
menu {max-height: auto; margin: 0 auto;text-align: center;background-color: #313131;}
content {margin: 0 auto;padding: 10px;float: center;font-size: 12pt;}
footer {clear: both;max-width: 100%;margin: 0 auto;padding-top: 20px;color: #666666;text-align: center;font-size: 9pt}

/*skalowanie zdjec*/
content img {max-height:100%; max-width:100%;}
header img {max-height:100%; max-width:100%;}

#content {float:center;margin:0 0 25px;}
#menu ul {margin-left: 0;padding-left: 0;list-style: none;}

/*PC + notebook*/
@media only screen and (min-width: 800px) {
#content {width:100%;}

/*SMARTFON*/
@media only screen and (max-width: 800px) {
#content {width:100%;}
}

[kulek855]

Teraz sprawdziłem - problem występuje w przeglądarce chrome na android. W zakładce "O mnie" oraz "blog" litery są powiększane.
Link do strony:
www.danielwdowiak.pl

[kulek855]

Problem rozwiązany. W sekcji head wpisałem:

<meta name=viewport content="width=device-width, initial-scale=1">