jquery - auf dem Telefon immer zu klein

[Großer]

Hier bbs-speyer.de (links oben) kämpfe ich schon seit Monaten immer mal wieder mit der mobilen Umsetzung. Das Gute: man siehts auf Iphonen, Windows und Androiden und die Navigation funktioniert. Mein Problem: Auf allen Plattformen ist die Ausgabegröße viel zu klein. Wie kriege ich das in den Griff?
Hier noch das TS:config {
renderCharset = utf-8
doctype = html5
xmlprologue = none
}

page = PAGE

page.includeJSlibs {
jquery = http://code.jquery.com/jquery-1.6.1.min.js
jquery.external = 1
jquery.disableCompression = 1
jquery.excludeFromConcatenation = 1

jquerymobile = http://code.jquery.com/mobile/1.0b1/...e-1.0b1.min.js
jquerymobile.external = 1
jquerymobile.disableCompression = 1
jquerymobile.excludeFromConcatenation = 1
}

page.includeCSS {
jquerymobile = http://code.jquery.com/mobile/1.0b1/...-1.0b1.min.css
jquerymobile.external = 1
jquerymobile.disableCompression = 1
jquerymobile.excludeFromConcatenation = 1
}

page {
// Kopfzeile mit Dokumentitel
10 = TEXT
10 {
data = page:title
wrap = <h1>|</h1>
wrap2 = <div data-role="header" data-position="fixed" data-theme="a">|
dataWrap = <div data-role="page" id="page_{page:uid}" data-add-back-btn="true">|
}
// Zeile unterm Kopf mit Festtext
20 = TEXT
20 {
value = Johann-Joachim-Becher-Schule SPEYER
typolink.parameter = {$website.links.homepage}
typolink.ATagParams = data-icon = "home" data-iconpos = "notext" data-direction = "reverse" class="ui-btn-right jqm-home"
wrap = |</div><!-- /header -->
}
// Inhalt
30 < styles.content.get
30.wrap = <div data-role="content">|</div>

1000 = TEXT
1000.value = </div><!-- /page -->
}

# Remove useless classes (h1 class="csc-firstHeader" and so on)
lib.stdheader.3.headerClass >

lib.stdheader.stdWrap.dataWrap >
tt_content.stdWrap.innerWrap.cObject.default >

# Remove class="bodytext" to paragraphs
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >

# Change header levels: h1 -> h2, h2 -> h3, h3 -> h4
lib.stdheader.10.1 < lib.stdheader.10.2
lib.stdheader.10.2 < lib.stdheader.10.3
lib.stdheader.10.3 < lib.stdheader.10.4

temp.listHeader = COA
temp.listHeader.1 = TEXT
temp.listHeader.1 {
field = header
if {
equals.field = header_layout
value = 100
negate = 1
}
wrap = <li data-role="list-divider" role="heading">|</li>
}
temp.listHeader.wrap = <ul data-role="listview" data-inset="true">|

# Sitemap tuning
tt_content.menu.10 >
tt_content.menu.10 < temp.listHeader
tt_content.menu.20.1.wrap = |</ul>


# Remove the home icon on homepage
[globalVar = TSFE:id = {$website.links.homepage}]
page.20.value >
page.20.typolink >
[global]

Am liebsten wäre mir natürlich eine TS Lösung. Danke im voraus.

[jteine]

Hallo.
Füge deinem Dokument doch mal folgenden Meta-Tag hinzu. Dann sollte das klappen.

<meta name="viewport" content="width=device-width, initial-scale=1">

Viele Grüße,

[Großer]

Danke für den Tipp, damit klappt es mit folgendem TS auf Iphonen (3/4), Android und Windows.

30.meta {
viewport = width=device-width, initial-scale=1, maximum-scale=1
// <meta name = “viewport” content = “width = device-width, initial-scale=1″ />
}