Wie kann ich CSS basierend auf einem mobilen Gerät ändern?

Im folgenden Beispiel möchte ich je nach Gerät nur eine div anzeigen.Wie kann ich CSS basierend auf einem mobilen Gerät ändern?

Ich bin vertraut mit der Verwendung von @media zum Überschreiben einer CSS-Klasse, aber nicht, wie eine Bedingung zu tun.

<style type="text/css"> 
    @media (max-width : 770px) { 
    ... 
    } 

    @media (max-width : 320px) { 
    ... 
    } 
    //do I need another for the desktop? 
</style> 

//if desktop 
<div style="width: 400px; float: left;"> 
    this is desktop 
    <a href="somepage.html"><img src="aLargeImage.png"/></a> 
</div> 

//if mobile 
<div style="width: 200px; float: left;"> 
    this is mobile 
    <a href="somepage.html">just text</a> 
</div>

Irgendwelche Vorschläge?

Quelle

2013-04-22 4thSpace

Ich bin hier etwas verwirrt, aber alles was du willst ist, die verschiedenen div-Elemente anzuzeigen, abhängig davon, welche Bildschirmgröße der Benutzer besucht hat? – Hoshts

Unabhängig davon, ob der Inhalt ausgeblendet ist, wird der Benutzer ihn dennoch herunterladen. Viele Leute zahlen in diesen Tagen von der KB auf ihren mobilen Plänen. – cimmanon

Nicht so viele. Viele Pläne sind unbegrenzte Daten. Aber nicht wirklich pro KB-Problem. Ich denke, verstecken/zeigen diese zwei divs ist die Lösung. Ich muss nur andere Klassennamen verwenden. – 4thSpace

Hm ich denke, es ist einfacher zu erstellen 2 oder mehr CSS-Dateien und laden Sie sie über Javascript auf dem Gerät basiert. So etwas in der Onload-Funktion:

var cssPath = "standard.css"; 
if (navigator.platform == "iPad") 
    cssPath = "iPad.css"; 

var fileref = document.createElement("link"); 

fileref.setAttribute("rel", "stylesheet"); 
fileref.setAttribute("type", "text/css"); 
fileref.setAttribute("href", cssPath); 

document.getElementsByTagName("head")[0].appendChild(fileref);

Kürzere und besser lesbare css-Dateien einfach auszutauschen.

Quelle

2013-04-22 20:41:03 OliverK

I ändern Möchte Javascript vermeiden. – 4thSpace

Hier ist ein Beispiel dafür, wie es bedingt ohne Javascript getan werden:

//CSS 
.visibledevice {display:none;} 
.visibledesktop {display:display;} 

@media (max-width : 320px) { 
.visibledevice {display:block;} 
.visibledesktop {display:none;} 


//in the page 
<div class="visibledesktop">this displays for desktop</div> 

<div class="visibledevice">this displays for mobile</div>

Quelle

2013-04-22 23:18:29 4thSpace

Und wie definieren Sie die Div-Klasse an erster Stelle? ist die zwei div wird in HTML gerendert, egal welches Gerät ist.! In diesem Fall werden zwei div mit demselben Inhalt auf der Seite gerendert. Von SEO-Aspekten halte ich es nicht für eine gute Idee, die KW-Dichte zu verdoppeln. zuletzt habe ich gewählt, da die Lösung immer noch besser als Js Lösungen –

, wie es ohne spezifische Breite getan werden kann? – fdrv

@fdrv kann es nicht, wenn Sie Benutzer-Agenten verwenden. – User

wie eine conditionnal CSS-Medienabfrage tun:

@media only screen and (width : 1024px) and (orientation : landscape) {  
    .selector1 { width:960px; } 
}

Quelle

2013-09-24 00:09:28

Ich weiß, dass dies ein alter Thread, aber ich für mich gedacht, eine bessere Option .. mindestens

<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=1"> 
<?php 
if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm(os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s)|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp(i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac(|\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(|\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg(g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v)|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v)|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-|)|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))) 
{ echo '<link type="text/css" rel="stylesheet" media="all" href="/styles/mobile.css">'; 
} 
else{ 
echo '<link type="text/css" rel="stylesheet" media="all" href="/styles/desktop.css">'; 
}; 
?>

Quelle

2014-06-19 20:48:10 ihateclownz

Ich bekomme eine Warnung: 'Hinweis: Undefinierte Variable: useragent in [...] Zeile [...]' mit Ihrem Code. Ich denke, der "$ useragent" ist am Ende der Zeile. Kannst du das erklären? – uomopalese

Wie kann ich CSS basierend auf einem mobilen Gerät ändern?

Antwort

Verwandte Themen