ViewPort für alle (mobile) Systeme richtig einstellen

B

baeri

Erfahrenes Mitglied
Hi Leute,

ich habe eine kleine Seite gemacht, die man Mobil abrufen können soll...

da ich einige Elemente verbaut habe, deren Proportionen immer gleich sein sollen habe ich im "body" eine Feste breite:
Code: 
body{ width: 600px;  }
.qdr{ width: 300px; height: 300px; }

nun, man kann meine Seite auf allen Browsern sehen und sie sieht auch "gut" aus... aber die Scalierung passt nicht.

Code: 
<meta name="viewport" content="width=600px, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
so schaut unter Windows 10 Mobile (ehemals WindowsPhone) alles gut aus. Unter Android (selbe Displayauflösung hingegen sieht man gerade mal ein viertel des bereiches).

Code: 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
machts für Windows 10 Mobile schlecht und unter Android passts auch noch nicht...

was man so online lesen kann ist der viewport mit device-width vermutlich die richtige Richtung. Also muss ich im CSS was verändern, kann mir jemand Tipps geben?

Mit Javascript nachscalieren möchte ich nicht (zumindest wäre das mein letzter Ausweg). Den Code so anzupassen dass die Formen Prozentual abgeändert werden, habe ich versucht - funktioniert aber nicht richtig
weil ich z.B. "quadratische" Flächen haben muss... und während ich mit einer festen "body"-breite mit 300x300 ein Quadrat mit halber Fenster breite hin bekomme (auch etliche Abstände und Zeilenhöhen sind hier verbaut). Ist bei einem relativen "body", zwar mit 50% in der breite geholfen, in der höhe steh ich aber dumm da :(

evtl. kann man mir jemand weiterhelfen!
Vielen Dank
baer
 
naja, ne 2. CSS Regelung bekomme ich schon hin (auch wenn ichs schade finde dass man hier nicht einfach mal Standards machen kann)...

aber mein Problem ist, für Android bekomm ichs ja garnicht hin, dass es sich entsprechend anpasst...
 
Um welches Smartphone-Modell und Version handelt es sich überhaupt beim OS "Android"?

Ist die Seite für Dritte zugänglich, um einen Blick darauf werfen zu können?

EDIT: Optional kannst Du mir den Link per PN nennen.
 
Zuletzt bearbeitet:
nein, das Projekt läuft in meinem Smarthome und ist momentan noch OFFLINE (also nur im lokalem Netzwerk)... eine Spezifizierung vom Andoid will ich eigentlich nicht, da es "überall" laufen soll!

aber Script Auszüge wäre kein Problem

index
Code: 
<!DOCTYPE html>

<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=600px, initial-scale=1.0, user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>Smarthome</title>
       
        <script src="jquery-2.2.0.min.js"></script>
        <link rel="stylesheet" href="roStyle.css" />
    </head>
   
    <body oncontextmenu="return false">  

   
<ul id="home">
   
</ul>

Code: 
@viewport{
        zoom: 1.0;
        width:extend-to-zoom 100%;
    }

    @-ms-viewport{
        width:605px;
        zoom: 1.0;
    }

    body, html {
        background: rgb(10,10,10);
        background-size: 600px;
        width: 600px; 
        margin: 10;
        padding: 0;
        color: rgb(180,180,180);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        font-family: 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif;
    }

    ul{
        width: 590px;
        list-style: none;
        padding: 0;
        text-align: center;
        overflow: auto;
    }

auch das hier zoomt schon nicht richtig
 
Bitte mit dem nicht näher spezifizierten Android-Smartphone testen:

http://andreasbovens.github.io/understanding-viewport/
-> http://andreasbovens.github.io/understanding-viewport/meta-width640.html
-> http://andreasbovens.github.io/understanding-viewport/meta-widthdevicewidth-div600.html
-> http://andreasbovens.github.io/unde...ta-widthdevicewidth-initialscale1-div600.html

Mit
HTML: 
<meta name="viewport" content="width=600"><!-- Ohne px-Angabe, die gilt automatisch! -->
passt sich auch Deine Seite mit den absoluten CSS-Dimensionen auf meinem Android-Display an.
HTML: 
user-scalable=no
Zeigt bei mir eh keine Wirkung.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück