Website für´s Smartphone

hallo,

meine website ist jetzt ziemlich umfangreich. deswegen habe ich Sie fürs smartphone optimiert, (smartphone.css) jetzt will ich aber die ganzen inhalte einfach neu machen, also von der index.html auf eine andere html verweisen, bei zb. 480 px

<!-- Smartphone  -->
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png">
<meta name="viewport" content = "width=device-width, user-scalable = no">

<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/smartphone.css" media="only screen and (min-width : 320px) and (max-width : 480px)">
<link rel="stylesheet" href="assets/css/ipad-portrait.css" media="only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait)">
<link rel="stylesheet" href="assets/css/ipad.css" media="only screen and (min-width : 768px) and (max-width : 1024px)">
<link rel="stylesheet" href="assets/css/iphone4.css" media="only screen and (-webkit-min-pixel-ratio : 1.5), only screen and (min-pixel-ratio : 1.5)">

oder muss ich alles per { display:none; } machen?
werden die inhalte geladen und einfach ausgeblendet, oder komplett ignoriert?

[Mackymesser111]

Zitat von baley

werden die inhalte geladen und einfach ausgeblendet?

Ja genau, leider…

Aber du kannst mit Javascript Inhalte nachladen lassen wenn die Auflösung einen bestimmten wert übersteigt.

ja responsive wäre sie, wenn ich eben die css variante verwenden würde, jedoch habe ich einige jquery inhalte, und fürs smartphone will ich die seite so schlank wie nur möglich halten, also quasi eine vertikale seite ohne buttons/verweise sonstiges... so würde sich eine "neue" website anbieten

wie funktioniert das mit dem js die inhalte zu blockieren?

[Mackymesser111]

ob das mit dem Inhalt ausblenden nun sinnvoll ist oder nicht ist von hier aus schwierig zu beurteilen. Auf die diashow im Header kann ich z.B. auf meinem iPhone getrost verzichten. Ich denke aber das du weißt was du tust

Die wahrscheinlich einfachere Variante ist mit prototype.js. Das ist ein Framework mit dem du mittels AJAX-Requests einzelne divs dynamisch befühlen kannst.

Da du aber schreibst das du auch einige jQuery Inhalte benutzt und so mit der Denkweise von jQuery vertraut bist, ist vielleicht diese Lösung für dich interessanter: .load()

PS: Aber ich würde dennoch mal überlegen ob du nicht doch alle Inhalte auf deiner mobilen version anbieten willst. Ansonsten ist eine Möglichkeit auf alle Inhalte auch am Smartphone zugreifen zu können Pflicht!

was sasgt ihr zu :

<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "mobile.html";
}
//-->
</script>

das funktioniert doch auf jedem smartphone was einfach kleiner als 700px ist oder?

[Mackymesser111]

Ja das solte so klappen, aber dann musst du leider erst ein HTML Dokument vorschalten in dem dann entschieden wird welches HTML Dokument nachgeladen werden soll. Die nachgeladene HTML Datei ersetzt ja nicht die vorherige sondern hängt sich nur hinten dran

-> und damit währe natürlich jegliche Suchmaschienen Optimierung im ar***