CSS/HTML - Verstecken von Bildern auf dem Handy, und verwenden Sie einen alternativen text

Ich habe derzeit eine Seite, die generiert eine Tabelle aus einer SQL-Datenbank mit PHP, einschließlich einer Spalte, die Bilder enthält. Aufgrund der uns jetzt mit der Arbeit auf einer mobilen Plattform, ich bin auf der Suche nach einem Weg zu verbergen die Bilder. Ich bin derzeit mit display: none auf eine antiscreen.css - Datei, aber die Bilder sind links, die es nicht in die links

Für Klarheit, wenn das Bild auf einem PC-browser-es erscheint wie diese:

<td>
  <a href="link to image source:>
    <img  height=80 alt='Text I want to display' src="link to image source" />
  </a>
</td>

Als auch auf eine mobile dem Bild, link und text verborgen sind, mit der display:none Methode.

So, wie würden Sie empfehlen ich, diese Arbeit aus?

  • Wie sind Sie mit der Bestimmung, dass ein Gerät ist Mobil? User-agent-sniffing? Media Queries? Sie haben keine Kontrolle über die Ausgabe der html-Seite?
  • Ich bin mit der Verwendung von media-queries über den max-width element.
InformationsquelleAutor Fergus Barker | 2011-10-07
  1. 1

    Ich würde wahrscheinlich tun Sie dies:

    <td>
  <a href="link to image source:>
    <img  height=80 alt='Text I want to display' src="link to image source" />
    <span class="mobileonly" src="link to image source">Text I want to display</span>
  </a>
</td>

    Dann würde ich span.mobileonly { display: none; } auf der Haupt-stylesheet und span.mobileonly { display: inline; } im antiscreen.css. Der Vorteil ist, dass der mobile-link wird auch einfach sein Stil.

    • Hervorragend gemacht!
    InformationsquelleAutor Kaivosukeltaja
  2. 0

    Einer anderen option, die für alle screen-Größen unter einer bestimmten nr. der Pixel wird die Verwendung einer media query im Grunde ähnlich wie oben, nur mit dem Vorteil, dass es funktioniert auf jedem Bildschirm-Größe kleiner als die definierte Anzahl von Pixeln.

        /* Media Query for mobile */

    @media screen and (max-width: 480px) {  

    /* This resizes tables and images to be 100% wide with a proportionate width */

    /* Hide stuff on mobiles */
    table[class=emailnomob],td[class=emailnomob],img[class=emailnomob],span[class=emailnomob]{display:none !important;}

    /* Additional Media Query for tablets */

    @media screen and (min-width: 480px) and (max-width: 1024px) {

    /* Hide stuff on tablets */
    table[class=emailnomob],td[class=emailnomob],img[class=emailnomob],span[class=emailnomob]{display:none !important;}

    Sollte dies umfasst sowohl mobile und tablet-Geräte.

    Code mit freundlicher Genehmigung von .net E-Mail-tutorial. Ich habe nur abgespeckte Teile, die Sie nicht brauchen.

    Verwendung:

    <img class="emailnomob" height=80 alt="Text I want to display" src="link to image source" />
    InformationsquelleAutor user2381876
Schreibe einen Kommentar