HTML - /CSS - Mobile vergrößert zu starten

Haben ein Problem, wo alle mobilen Geräte vergrößert ist 50% am start. Das ist jedes Gerät anders als das iPad. Versucht zu tun, ein PHP überprüfen, um zu skalieren 50% aus, wenn alle anderen als das iPad, aber wenn Sie bewegt von der Landschaft -> Bild -> die Landschaft würde es dann skalieren 50% wieder.

Hier ist meine aktuelle meta-tags:

<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=640, height=700, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

Meine HTML verwendet keine Breite von 100% nur in px. Insgesamt ist der Inhalt nicht verlängern 640 Breite und 700 Höhe.

Tun jemand eine Idee, wie ich vielleicht dieses Problem vermeiden?

Bearbeiten

Kam zu dem Schluss, dass @hakre war zu Recht über die Skalierung der Pixel. Mein fix war zu jedem " Breite in % statt px. Auf diese Weise ist es auto-size-egal was. Eine Sache zu beachten ist, dass ich Sie entfernt die Waage. Grund warum ist, dass Sie scheinen zu versauen, das layout auf manchen Geräten. Noch einmal vielen Dank @hakre

  • Es gibt einige Antwort-Elemente hier : stackoverflow.com/questions/4472891/...
  • Yer, wollte sagen <meta content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport" /><meta content="width=device-width" name="viewport" /> aber dein link hat diese
  • Nein, dass ist nicht die Antwort. Dann hast du einfach nicht zulassen, dass der Benutzer zum Maßstab der Seite. Aber wie jedes Gerät in meinem Haus wird die Skala automatisch ohne Interaktion mit dem Benutzer ist dies nicht die Lösung. Vielen Dank für den Versuch sowieso 🙂
InformationsquelleAutor Dannie Hansen | 2011-12-19
  1. 2

    In CSS, die px ist ein absolute Länge Einheit. Sie sind vor allem nützlich, wenn der output-Umgebung bekannt ist.

    Für eine CSS-Gerät, diese Dimensionen sind entweder verankert (i) im Zusammenhang mit den physikalischen Einheiten [in, cm, mm, pt, pc], um Ihre physikalischen Messungen, oder (ii) über die pixel-Einheit [px], um die Referenz-pixel. [Ergänzungen und Hervorhebung von mir]

    Wenn die Referenz-pixel wird die Hälfte der Geräte Anzeige die physikalischen pixel ein CSS-Wert 700px übersetzt werden 350px auf die Anzeige - oder die besagten 50% in deiner Frage.

    Also, was Sie hier erleben ist völlig richtig, die CSS ist korrekt, in dem Sinne, dass Sie wählen pxEinheiten, Sie müssen nur verpasst, dass eine px in CSS ist nicht das gleiche wie das pixel auf dem display. So ist es nicht, aber Sie wollen es zu sein, es sieht aus wie Sie gewählt haben, die falsche Einheit.

    Wieder: absolute Länge Einheiten sind vor allem nützlich, wenn der output-Umgebung bekannt ist.

    Vielleicht findest du einen Weg, zu sagen, den browser zu ändern, dass Referenz-pixel? Diese lösen würde Ihr Problem. Oder jetzt, da Sie wissen, was passiert, erkennt das Gerät und ändern Sie die Längen entsprechend.

    Als alternative können Sie ersetzen Ihre absolute Längen mit relative Werte (em, ex). Da Sie relativ sind, müssen Sie nur ändern Sie die Länge des Elements Sie sind relativ zu wechseln, die ganze Seite.

    Üblicherweise wird dies getan, indem Sie mit einem absoluten Länge auf der <html> - und/oder <body> element und relative Längen für alles andere.

    Dieser Ansatz kann Ihnen helfen, das problem zu lösen.

    • Nein, dass ist nicht das Problem. Die Sache ist, dass die mobilen Browser onload vergrößert 50%. Sie können dann zoom wieder raus, aber die Breite/Höhe der Elemente ist vollständig corrrect. Eine mögliche Lösung wäre, entweder ließ es sich auf den ersten oder zoom nicht bei allen. Vielen Dank für das schreiben, aber ich wusste schon, dass 🙂 Mein Problem ist einfach, dass es scheint, werden in einem vergrößerten Zustand auf laden. Die Anzeige der Elemente ist korrekt.
    • Nur einem Eingang. Bereits festgelegte Breite für alle Elemente, und keiner von Ihnen erweitern Sie mit dieser Breite. Danke einmal mehr für geben, es zu versuchen.
    • Ist die vergrößern eine CSS-Eigenschaft in Ihrem Fall? Wenn dem so ist, können Sie fügen Sie die client-Stylesheet es? Zusätzlich sind Sie sich bewusst, CSS Device Adaptation? Möglicherweise müssen Sie ein Verkäufer-spezifisches Modul für diesen, es ist immer noch ein Entwurf.
    • Ich glaube nicht, verwenden Sie die zoom-Eigenschaft in css überhaupt. Habe auch versucht aus diesen viewport-Werte, aber ohne Glück. Der viewport ist immer 50% gezoomt auf den ersten, egal, was ich mache. Wie die maximum-scale ist 1.0 und ich bin in der Lage, zoom-out auf den ersten scheint es, wie die initial-scale-Eigenschaft wird nicht ordnungsgemäß ausgeführt. Wenn es auf 1.0 gesetzt aus starten und der Benutzer sollte die Anzeige 1 -> 1-pixel aus starten, er/Sie sollte nicht in der Lage, um zu verkleinern. Aber als er/Sie ist es Mittel der ersten Skala ist nicht gesetzt oder nervt. Irgendeine Idee, was es sein kann?
    • Ich habe nicht gemeint, dass Sie verwenden Sie den zoom-Anwesen, aber der browser, das ist, warum ich, fragte client für CSS (nicht vom Benutzer oder Autor CSS). Also, wenn Sie anzeigen zu können, die inital CSS-Regeln auf, die Plattform für deine Seite, das wäre gut zu wissen. Habe kein android zur hand, in dem moment, wenn Sie wissen, dass ein offizielles android-simulator kann ich auf meinem windows-Rechner hier, schickt mir einen link und ich kann einen Blick.
    • Kam zu dem Schluss, dass Sie sind wir rechts über die Skala der Pixel. Mein fix war zu jedem " Breite in % statt px. Auf diese Weise ist es auto-size-egal was. Eine Sache zu beachten ist, dass ich Sie entfernt die Waage. Grund warum ist, dass Sie scheinen zu versauen, das layout auf manchen Geräten. Danke für die Hilfe, aktualisierte Frage mit Abschluss.

    InformationsquelleAutor hakre
  2. 4

    Habe ich nur getestet, auf Android-Standard-browser und Opera Mobile, aber es scheint gut zu funktionieren. Immer noch keine Möglichkeit zum deaktivieren der Zoom auf Android ' s browser leider...

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
<meta name="viewport" content="target-densitydpi=device-dpi" /> 
<meta name="HandheldFriendly" content="true"/>
    InformationsquelleAutor EpicMedia
Schreibe einen Kommentar