Webflow anderer Content für mobile?
Ich würde gerne einige Texte meiner Website kürzen, aber NUR für die Smartphone Version. Ist das möglich?
2 Antworten
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
CSS
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
Nutzer, der sehr aktiv auf gutefrage ist
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.
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