Ein 2. Smartphoneproblem

[Emess]

Folgende Seite besteht aus Onepagetemplate und drei Sprachen. Webdeveloper zeigt in der responsiven Ansicht alles perfekt an aber im Smartphone ist nur Deutsch gut. Sobald ich Englisch oder France anwähle rückt das "Hamburger-Menü" recht aus dem Bildschirm und der gesamte Body ist dann breiter. rufe ich zum Bsp: http://www.my.emess62.de/fra.html muss ich den Bildschirm nach links schieben dann kann wieder deutsch auswählen dann stimmt die Ansicht wieder. Alle drei Seiten haben die gleiche CSS

bei "http://www.my.emess62.de/eng.html" ist es das gleiche.

ist das nur auf meinem Smartphone so? (Vielleicht ist es nicht mehr up to date)

Hat da spontan jemand eine Idee?

switcher deutsch:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top navbar-toggle">
        <a class="navbar-brand page-scroll" href="#start">Farid Ben Yahia</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-main" aria-controls="nav-main" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

        <div class="collapse navbar-collapse" id="nav-main">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#about">Profil</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#portfolio">Werke</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#contact">Kontakt</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#impressum">Impressum</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#datenschutz">Datenschutz</a>
                </li>
                <!-- Switcher -->
<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"><span class="flag-icon flag-icon-de"></span> Deutsch</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="eng.html"><span class="flag-icon flag-icon-gb"> </span>English</a>
            <a class="dropdown-item" href="fra.html"><span class="flag-icon flag-icon-fr"> </span>Französisch</a>
                    </div>
                </li>
            </ul>
        </div>

    </nav>

France

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top navbar-toggle">
          <a class="navbar-brand page-scroll" href="#start">Farid Ben Yahia</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-main" aria-controls="nav-main" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

        <div class="collapse navbar-collapse" id="nav-main">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#about">Profile</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#portfolio">œuvres</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#contact">Contact</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#impressum">Empreinte</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#datenschutz">Politique de confidentialité</a>
                </li>
                <!-- Switcher -->
 <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"><span class="flag-icon flag-icon-fr"></span>France</a>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="eng.html"><span class="flag-icon flag-icon-gb"></span>English</a>
            <a class="dropdown-item" href="index.html"><span class="flag-icon flag-icon-de"></span>Allemand</a>
                    </div>
                </li>
            </ul>
        </div>

    </nav>

[Gunnar Bittersmann]

@@Emess

Deinen anderen THread hab ich geschlossen.

Ich kann dein Problem weder auf iPhone noch auf MacBook nachvollziehen.

Aber zu deinem Sprachauswahlmenü:

• Flaggen stehen nicht für Sprachen.

• Es mutet komisch an, auf die Bezeichnung der aktuellen Sprache clicken (o.ä.) zu müssen, um zu einer anderen Sprache zu wechseln. Überhaupt sind Drop-down-Menüs zur Sprachauswahl problematisch. Bei drei Auswahlmöglichkeiten brauchst du kein Dropdown, sondern kannst gleich alle drei Optionen anzeigen.

• Die Beschriftung der einzelnen Sprache darf nicht in der Sprache der aktuellen Seite erfolgen, sondern in der jeweiligen Zielsprache. Jemand, der nur deutsch spricht und auf der französischen Seite landet, kann mit Allemand vermutlich nichts anfangen.

  France bezeichent keine Sprache, sondern ein Land. Länder stehen nicht für Sprachen. (Und deshalb tun Flaggen das auch nicht.)

  Die richtige Beschriftung wäre: deutsch (oder auch Deutsch), English, français.

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Emess,

auf meinem Android mit Chrome habe ich diese Probleme:

• in ALLEN Sprachen muss ich nach rechts scrollen, um den Hamburger vollständig zu sehen. Im Deutschen ist es nur nicht so viel.
• halte ich mein Handy quer, ist die französische Sprachauswahl nicht erreichbar. Dein Menü ist höher als mein Querbildschirm

Auf dem Responsiveness-Simulator von Chrome zerreißt es die Darstellung auch, und es wird geheilt, wenn ich den CSS Selektor

#datenschutz a {
   word-break: break-all;
}

einfüge. Es sind wieder einmal die URLs als Linktext, die nicht umbrechen und das Layout zerreißen.

In ENG und FRA hilft das nichts, weil die URLs da keine Links sind, sondern Plaintext. Damit wird alles noch breiter und das Layout zerreißt noch mehr.

Die Datenschutzerklärung ist eh ein Horror. Das sieht aus wie ein generischer Misthaufen, der universell für jede Webseite gemacht scheint - ist das wirklich alles für ihn relevant?

Rolf

[Michael]

Hallo Emess,

Auf dem Responsiveness-Simulator von Chrome zerreißt es die Darstellung auch, und es wird geheilt, wenn ich den CSS Selektor

#datenschutz a {
   word-break: break-all;
}

einfüge. Es sind wieder einmal die URLs als Linktext, die nicht umbrechen und das Layout zerreißen.

die hatte ich garnicht im Auge

Die Datenschutzerklärung ist eh ein Horror. Das sieht aus wie ein generischer Misthaufen, der universell für jede Webseite gemacht scheint - ist das wirklich alles für ihn relevant?

Rolf

so wird es wohl sein.

Danke für den Hinweis.