Festes Layout mit Gridster

[AB1970]

Hallo,
mein TabletUI ist weitgehend fertig, und funktioniert auf dem Tablet hervorragend.
Wenn ich mir allerdings das iPhone nehme, versucht es einzelne Grids neu anzuordnen. Das endet im Chaos.

Ich möchte, dass es erst gar nicht versucht wird, sondern das Layout statisch bleibt.

Ich habe viel gesucht, aber nichts gefunden, habt ihr eine Idee ?

[roman1528]

Code Auswählen Erweitern

<meta name="gridster_disable" content="1">

[AB1970]

Hallo
vielen Dank, ja das war auch mein erster Gedanke! Gridster_disable verhindert, das man die Grids von Hand verschieben kann.
Allerdings leider nicht das Auswürfeln der Grids beim ersten Aufbau.

[Thorsten Pferdekaemper]

Hi,
das hier hat bei mir geholfen:

Code Auswählen Erweitern


<div class="gridster" style="width:1070px">

Die Zahl nach "width" wird bei Dir anders sein. Das probiert man am besten aus.
Gruß,
   Thorsten

[roman1528]

Habe ich nicht... und auch keine Probleme...

Wichtig ist auch die row/col anordung der <li> im gridster.. da dürfen keine überschneidungen sein!!

Code Auswählen Erweitern

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

als ersten meta-tag eintragen...

[AB1970]

Hi,
vielen Dank euch allen! Manchmal hat man Tomaten auf den Augen:

Code Auswählen Erweitern

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

geändert in :

Code Auswählen Erweitern

<meta name="viewport" content="width=1024px, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

läuft

[roman1528]

Deswegen habe ich meins gleich so eingerichtet, dass es nicht anders kann als auf mein Tablet zu passen^^

[AB1970]

Hi,
Um das Thema abzuschliessen: Hier die Konfiguration die bei mir mit dem iPhone 6 und dem iPad Air fehlerfrei läuft.

Code Auswählen Erweitern


    <meta name="viewport" content="width=1024px, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
    <meta name="widget_base_width" content="116">
    <meta name="widget_base_height" content="131">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">


Vielleicht hilft es ja jemanden. Noch einmal danke an alle die geholfen haben.