Webflow anderer Content für mobile?

2 Antworten

EinAlexander
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
CSS
16.04.2019, 11:23
Ich würde gerne einige Texte meiner Website kürzen, aber NUR für die Smartphone Version. Ist das möglich?

Das ist ganz einfach möglich, aber fürs SEO sehr, sehr schädlich.

<!doctype html>
<title>mobile text</title>
<style>
.mobileOnly {
    display:none
}

@media screen and (max-width:400px) {
    .desktopOnly {
       display:none
   }
   .mobileOnly {
       display:block
   }
}
</style>
<section>Dieser Text wird auf allen Geräten angezeigt und von Google indexiert</section>
<section class="desktopOnly">Dieser Text wird nur ab 400px Breite angezeigt und von Google ignoriert</section>
<section class="mobileOnly">Dieser Text wird nur bis 400px Breite angezeigt und von Google indexiert</section>

Alex
glebkema
Nutzer, der sehr aktiv auf gutefrage ist
im Thema CSS
15.04.2019, 15:25

Sie können einige Inhalte mithilfe von Medienabfragen ("media queries") ausblenden oder anzeigen. Mit der Medienabfrage können Sie Stile festlegen, die nur für Bildschirme mit einer bestimmten Breite funktionieren.

  1. https://www.seobility.net/de/wiki/Media_Queries
  2. https://www.mediaevent.de/css/media-query.html

Sie können beispielsweise eine Stilklasse ".on-mobile-only" erstellen und diese auf die Teile des Inhalts setzen, die nur auf Bildschirmen sichtbar sein sollen, deren Breite weniger als 600 Pixel beträgt.

CSS

@media (min-width: 600px) {
	.on-mobile-only {
		display: none !important;
	}
}

HTML

<p>Dieser Text ist immer sichtbar.</p>

<p class="on-mobile-only">Dieser Text ist nur sichtbar, wenn die Bildschirmbreite weniger als 600 Pixel beträgt.</p>

<img src="image-1.jpg" alt="Dieses Bild ist immer sichtbar">

<img src="image-2.jpg" class="on-mobile-only" alt="Dieses Bild ist nur sichtbar, wenn die Bildschirmbreite weniger als 600 Pixel beträgt">
Woher ich das weiß:Berufserfahrung