# ViewPort für alle (mobile) Systeme richtig einstellen



## baeri (27. Januar 2016)

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:

```
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.


```
<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).


```
<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


----------



## SpiceLab (27. Januar 2016)

Ich empfehle Dir, Dich in diesem Punkt mit CSS Media Queries näher zu beschäftigen, um differenziertere CSS-Regelungen festlegen zu können.


----------



## baeri (27. Januar 2016)

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...


----------



## SpiceLab (27. Januar 2016)

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.


----------



## baeri (27. Januar 2016)

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

```
<!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>
```


```
@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


----------



## SpiceLab (27. Januar 2016)

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

```
<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.

```
user-scalable=no
```
Zeigt bei mir eh keine Wirkung.


----------



## Ethan L. (5. Oktober 2016)

such mal nach @media-Regeln da findest du bestimmt deine Antwort mit Mobile.


----------



## SpiceLab (5. Oktober 2016)

Ethan L. hat gesagt.:


> such mal nach @media-Regeln da findest du bestimmt deine Antwort mit Mobile.


Siehe Post #2 :-]


SpiceLab hat gesagt.:


> Ich empfehle Dir, Dich in diesem Punkt mit CSS Media Queries näher zu beschäftigen, um differenziertere CSS-Regelungen festlegen zu können.


----------



## baeri (6. Oktober 2016)

schonmal aufs datum geschaut?


----------

