Responsive Design

[xxsteffenxx]

Hallo zusammen,

ich benutze Aktuell folgendes Script um mein FTUI auf dem Tablet dazustellen

Code Auswählen Erweitern

<script type="text/javascript">
var isMobile = {
    Android: function() {
        <!--return navigator.userAgent.match(/Android/i);-->
return false;
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        <!--return navigator.userAgent.match(/iPhone|iPad|iPod/i);-->
return navigator.userAgent.match(/iPhone|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
    };
    </script>

Code Auswählen Erweitern

<script type="text/javascript">
if (isMobile.any()) {
  document.write('<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">');
}
else {
  document.write('<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">');
};
</script>

Gibt es eine Möglichkeit die HTML Seite wirklich responsive zu bauen damit diese auch automatisch an vers. Displaygrößen angepasst wird?

Überlege mir gerade noch zusätzlich ein 7" Tablet zuzulegen, allerdings habe ich keine Lust bzw. auch mit dem Aktuellen Code keine Möglichkeit dies für Desktop, 7", 10" und mein Smartphone anzupassen??

Im Forum hab ich schon eine Möglichkeit über css gefunden , aber da bin ich noch nicht ganz durchgestiegen 

Grüße Steffen

[zap]

Wenn Du einen Apache Webserver einsetzt mit Server Side Includes kannst Du je nach Client IP Adresse (oder auch nach anderen Kriterien) unterschiedlichen Content ausliefern lassen. Die doppelte (oder mehrfache) Bereitstellung von HTML Code ist aber bei der Lösung trotzdem erforderlich.

Ein Beispiel aus einer meiner Dateien (bei einem 10" Tablet wird eine Zeile mehr angezeigt):

Code Auswählen Erweitern


...
<li data-row="5" data-col="5" data-sizex="4" data-sizey="1">
<!--#include file="inc_dates.html" -->
</li>
<!-- One more line available on 10" tablet -->
<!--#if expr='"$REMOTE_ADDR" = "192.168.1.66"' -->
<li data-row="6" data-col="1" data-sizex="8" data-sizey="1">
<!--#include file="inc_addinfo.html" -->
</li>
<!--#endif -->


[Philbo]

Warum gehst du nicht nach der Auflösung der Geräte?
Im Grunde sollte sich so für jede Auflösung eine eigene Anordnung festlegen lassen.

[xxsteffenxx]

hmmm irgendwie alles nicht so meine Vorstellung ^^

Dachte eher an so ne automatische Anpassung like 100% oder so ^^
muss mich da mal genauer mit befassen wie ich das am besten löse

Danke euch schon mal

[xxsteffenxx]

Hallo zusammen,
ich hab die letzten Tage mal ein wenig gebastelt und mir ein Responsive Design gebaut.
Noch nicht 100% gut aber für den Anfang und meine CSS Kentnisse ausreichend

Bilder im Anhang

Wenn Interesse besteht oder mehr Infos gewünscht sind poste ich Sie hier gerne

[Thyraz]

Wenn man einfach will, dass die "Boxen" etwas breiter werden auf anderen Geräten, oder ein paar Dinge dann umbrechen,
kann man statt Gridster z.B. auch Bootstrap oder Ähnliches verwenden.

Ich bin zur Zeit eh am überlegen, ob ich wirklich alle so voll gequetscht haben will, oder lieber ein etwas lockeres Design und dafür mehr Seiten für die verschiedenen Räume.

Hatte testweise mal eine Seite mit Bootstrap erstellt, das ging problemlos.
Setstate hat soweit ich weiß auch schon ein paarmal Beispielcode mit Bootstrap gepostet.