it-swarm.com.de

Wie erzwinge ich die Skalierung einer Website für mobile Geräte (Iphone Android ..)

Wenn ich meine Site in ein iPhone lade, wird sie nicht verkleinert. Alles, was ich sehe, sind die paar hundert Quadratmeter Pixel. Ich bin neu für mobile Optimierung, aber ich denke, die meisten Seiten scrollen automatisch, und die meisten Fragen scheinen für das gegenteilige Szenario zu sein, das ich habe (zwingen Telefon nicht zum Verkleinern).

Ich möchte, dass die gesamte Seitenbreite sichtbar ist und der Benutzer so vergrößert werden muss, dass er den Text lesen kann.

Ich habe mit und ohne folgenden Code im Kopf versucht, aber ohne erkennbaren Effekt.

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

<!--  I Also tried: -->
<meta name="viewport" content="width=1024, initial-scale=1">   
36
Zach Lysobey

Verwenden der Dokumente hier: https://developer.Apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Es scheint, als sollten Sie die meisten Eigenschaften des Ansichtsfensters ignorieren und die Skalierbarkeit des Benutzers auf "Ja" setzen. Es arbeitet jetzt an meinem iPhone.

<meta name="viewport" content="user-scalable = yes">

Bearbeiten :: Die mobile Tester-Site lässt keine Skalierung zu, es werden also nur Bildlaufleisten angezeigt. Mit einem echten Telefon funktioniert das.

48
Gregg B

versuchen Sie, verschiedene CSS zu verwenden, und wechseln Sie sie (serverseitig) basierend auf den Client-Einstellungen. Zum Beispiel wird sich das iPhone wie folgt identifizieren: 

 HTTP_USER_AGENT=Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) 
 AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C25 Safari/419.3

Je nachdem, welche Skriptsprache Sie auf der Serverseite zur Verfügung haben, können Sie die CSS ändern.

Hier ist ein Beispiel.

4
alinoz

Das Viewport-Tag steuert, welcher Teil der Seite anfänglich angezeigt wird, die Seite selbst sollte jedoch so ausgelegt sein, dass eine Bildschirmgröße von 320 x 460 Pixeln ohne Zoomen auf dem iPhone angezeigt wird. Wenn Sie die Struktur der Seite nicht ändern möchten, können Sie mit Viewport steuern, wie die Seite anfänglich angezeigt wird.

2
Jerry

Entfernen Sie den width=1024, fügen Sie ihn einfach ein 

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

Löschen Sie den Browser-Cache des Telefons. Möglicherweise müssen Sie danach sogar aus- und wieder einschalten.

0
Web Guy