Responsive Design - Media Query funktioniert nicht auf dem iPhone?

Ich versuche eine mobilfreundliche Version meiner Website zu erstellen, damit meine Website auf eine kleinere Bildschirmgröße reagiert und entsprechend skaliert.Responsive Design - Media Query funktioniert nicht auf dem iPhone?

Ich habe einige Medienabfragen erstellt, die sich bei der Größenanpassung auf einem Desktop in einem Browser korrekt verhalten.

Auf meinem iPhone verkleinert Safari nur die gesamte Website, behält aber das Seitenverhältnis der Website in voller Größe bei. Wie kann ich die Medienabfrage beobachten? habe ich etwas verpasst? Hier

ist ein Link zu einer Sandbox, die ich versuche, richtig zum Laufen zu bringen - jede Hilfe oder Anregungen geschätzt werden:

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

Quelle

2012-10-21 Gearu

Haben Sie die Meta für Viewport in Ihrem HTML?

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

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

Quelle

2012-10-22 00:09:42 coopersita

Vielen Dank für die Antwort .. diese Antwort hilft mir sehr .. aber kleine Korrektur mein Freund coopersita .. Sie vermissen eine Schließung "auf Ihrem Tag;) –

LOL! Fixed it. Danke. – coopersita

Ich versuchte Um diese Antwort zu bearbeiten, um die falsche Syntax zu korrigieren, wurde sie abgelehnt. Sie sollte (fast wie die Antwort von user1506194) lauten: '' – penfold

Ich glaube, Sie mit einer Warnung in Chrome finden; statt, Dies sollte gut funktionieren:

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

Quelle

2013-08-21 13:07:21

Ich habe die akzeptierte Antwort bearbeitet, da diese Syntax korrekt ist. – penfold

ich gerade erlebte die bizarrsten Sache nach dem gleichen Problem für einen Tag zur Fehlerbehebung. Etwas zu versuchen, wenn alles andere fehlschlägt ...

Meine Seiten reagierten perfekt auf meinem Laptop während der Entwicklung, aber nicht auf meinem iPhone, iPad oder Samsung. Ich entdeckte schließlich hatte ich eine Kommentarzeile nach der DOCTYPE-Anweisung und vor der html lang Erklärung zu setzen, wie folgt aus:

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

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

Quelle

2018-03-03 23:16:34 Filemangler

Responsive Design - Media Query funktioniert nicht auf dem iPhone?

Antwort

Verwandte Themen