it-swarm.com.de

Responsive Design - Media Query funktioniert nicht auf dem iPhone?

Ich versuche, eine mobile Version meiner Website zu erstellen, um meine Website auf eine kleinere Bildschirmgröße ansprechen und entsprechend skalieren zu können.

Ich habe einige Medienabfragen erstellt, die sich beim Ändern der Größe eines Desktops in einem Browser korrekt verhalten.

Auf meinem iPhone verkleinert die Safari die gesamte Website, behält jedoch das Seitenverhältnis der gesamten Site bei. Wie bekomme ich die Medienanfrage, um beobachtet zu werden? habe ich etwas vermisst

Hier ist ein Link zu einer Sandbox, die ich versuche, korrekt zu funktionieren - jede Hilfe oder Anregung wird gebeten:

http://www.preview.brencecoghill.com/

30
Gearu

Haben Sie das Meta für den Ansichts-Port in Ihrer HTML-Datei?

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

Weitere Informationen hier: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

74
coopersita

Ich denke, Sie werden in Chrome eine Warnung mit finden; Anstelle von Das sollte gut funktionieren:

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

Ich habe gerade das seltsamste erlebt, nachdem ich dasselbe Problem einen Tag lang behandelt hatte. Etwas zu versuchen, wenn alles andere fehlschlägt ...

Meine Seiten waren während der Entwicklung auf meinem Laptop perfekt ansprechbar, aber nicht auf meinem iPhone, iPad oder Samsung. Ich stellte schließlich fest, dass ich nach der DOCTYPE-Anweisung und vor der html-lang-Anweisung eine Kommentarzeile einfügen musste, beispielsweise

<!DOCTYPE html>
<!-- This comment line needed for bootstrap to work on mobile devices -->
<html lang="en">

Schließlich reagierten meine Seiten auf den mobilen Geräten. Seltsam!

0
Filemangler