font-size in mobile 'winzig'

**derRenner** · 23.04.2020, 16:28

Hallo,

ich habe in einem Webprojekt 'bulma' als CSS-Framework eingebunden.

Code:

  html {
    background-color: white;
    font-size: 16px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    min-width: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
       -moz-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
            text-size-adjust: 100%;
  }

Über mobile Endgeräte verkleinert sich nun die Schrift auf super-klein - erinnert mich an Zeiten, wo noch kein 'responsive' aktuell war

Über die Dev-tools von Firefox finde ich aber nicht heraus wo sich denn die Schriftgrösse soweit verkleinert - ich sehe nur, dass die Standardgrösse nicht mehr greift:

Code:

html {
    font-size: 16px;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
}

Für mich ist kein tag ersichtlich, der dies überschreiben würde. Auch eigene Einträge mit !important und fiktiv grossen px-Grössen werden ignoriert.

Hat jemand einen Ansatz für mich, wo es denn noch "üblich" wäre, dass die Browserschriften überschrieben werden bzw. wo und wie ich denn die Standardgrösse auch mobile erzwingen kann?

vielen Dank

**Kahmoon** · 23.04.2020, 16:43

Warum vergibst du die Schrifteinstellungen im html und nicht im body? Bin mir nicht sicher ob das die Ursache ist.

**derRenner** · 23.04.2020, 16:48

Zitat von Kahmoon

Warum vergibst du die Schrifteinstellungen im html und nicht im body? Bin mir nicht sicher ob das die Ursache ist.

ja, im body wird sie auch vergeben - aber HTML wird überschrieben ...
Aber ich denke, dass ich die Ursache gefunden habe:
im <head> fehlt der viewport-Eintrag:

Code:

<meta name="viewport" content="width=device-width,initial-scale=1.0,shrink-to-fit=no,viewport-fit=cover">

jetzt muss ich noch genauer gucken, warum dem so ist ... ist nämlich eine komplett neue Installation und ich verwende kein eigenes fe_page.html
Wenn ich's unter zusätzliche <head>tags eintrage, dann klappt es so, wie's sein soll

» bug?

**derRenner** · 23.04.2020, 17:00

Verständnisfrage:

fe_page.html5

PHP-Code:


<head>



  <?php $this->block('head'); ?>

    <meta charset="<?= $this->charset ?>">

    <title><?= $this->title ?></title>

    <base href="<?= $this->base ?>">



    <?php $this->block('meta'); ?>

      <meta name="robots" content="<?= $this->robots ?>">

      <meta name="description" content="<?= $this->description ?>">

      <meta name="generator" content="Contao Open Source CMS">

    <?php $this->endblock(); ?>



    <?= $this->viewport ?>

    <?= $this->framework ?>

    <?= $this->stylesheets ?>

    <?= $this->mooScripts ?>

    <?= $this->head ?>

  <?php $this->endblock(); ?>



</head>

sollte <?= $this->framework ?> nicht den meta-Eintrag für viewport erzeugen? Oder wird dieser nur erzeugt, wenn ich eigene Einträge in Seitenlayout mache (Experteneinstellungen)?

Mein erzeugter <head> sieht so aus:

PHP-Code:


<head>

<meta charset="utf-8">

<title>meintitel</title>

<base href="https://meinedomain.at/">

<meta name="robots" content="index,follow">

<meta name="description" content="">

<meta name="generator" content="Contao Open Source CMS">

<link rel="stylesheet" href="assets/css/columns.css,colorbox.min.css,tablesorter.min.css,all.min.css,cus...-99789fac.css">

<script src="assets/js/jquery.min.js-c8e4f303.js"></script>

<style type="text/css">....</style>

</head>

also das <viewport> fehlt ...

**Spooky** · 23.04.2020, 17:02

PHP-Code:


<?= $this->viewport ?>

gibt den Viewport aus, den du im Seitenlayout eingestellt hast. Wenn du keinen Viewport eingestellt hast, wird auch kein Viewport ausgegeben (außer du benutzt das Responsive CSS Framework von Contao).

Thema: font-size in mobile 'winzig'

Themen-Optionen

Thema durchsuchen

font-size in mobile 'winzig'

Aktive Benutzer

Aktive Benutzer

Lesezeichen

Lesezeichen

Berechtigungen

Contao

Empfohlene Webdesign-Bücher