Ich habe eine Web-App, bei der Responsive-Layout für mobile Geräte keine Option ist. Daher habe ich versucht, mit der Skalierung des Ansichtsfensters ein wenig zu spielen, hatte aber keinen Erfolg dabei.
Die Seitengröße beträgt 1280x720. Bei kleinen Bildschirmen sollte die Bildgröße daher vergrößert und bei größeren Bildgrößen vergrößert werden:
%Vor%Ich habe das nur für die Breite versucht, aber das Ergebnis ist nicht das gewünschte, mache ich etwas falsch?
Ich bin mir nicht sicher, was genau Sie erreichen wollen, aber mit dem folgenden HTML
%Vor%und das folgende JS
%Vor%Sie sollten in der Lage sein, die anfängliche Vergrößerung der Seite auf Mobilgeräten anzuzeigen. Sie müssten überprüfen, ob das Gerät im Hochformat war. Für Landschaft müssten Sie screen.height im Gegensatz zu screen.width
verwendenFür mich erstelle ich eine CSS-Layoutdatei, verlinke sie mit meiner HTML-Datei und frage jede Breite ab oder du könntest Bootstrap lernen und deine Seite wird mobil bereit sein, ohne das zu tun, was ich tue (Bootstrap ist ein Schmerz, um js für mich zu bearbeiten) Was das Abfragen betrifft ist, wie ich es schreibe
in Ihrem HTML
%Vor%dann in deinem css
%Vor%Ich würde es einfach schreiben, aber Sie wollen Ihre CSS für Ihre Webseite dann bauen Sie die Dimensionen wie oben gezeigt auch sagen Sie wollten eine Menüleiste erscheinen Sie können eine CSS für die Hauptnavigation dann verwenden @media dann Ändern Sie die CSS für dieses Navigationselement, damit die Menüleisten angezeigt werden.
auch
%Vor%und
%Vor%Sind sehr hilfreich beim Abfragen von
Versuchen Sie anstelle von $(window).width() window.outerWidth .
Verwenden Sie auch Ihre bevorzugte Breite in Pixeln anstelle von device-width .
So wird der Code:
Es funktioniert bei mobilen Versionen von Chrome, Opera und Firefox. Lass mich wissen, wie es für dich funktioniert.
Es gibt verschiedene Möglichkeiten, eine responsive Website zu gestalten.
Als ich das mit den devTools von Chrome ausprobierte, schien die Variable scale etwa doppelt so groß zu sein wie die richtige Menge. Dividing by 2 hat das Problem für mich behoben:
Berechnen Sie die Breite dynamisch mit window.innerWidth & window.outerWidth Eigenschaften.