forked from movsim/traffic-simulation-de
-
Notifications
You must be signed in to change notification settings - Fork 3
/
README_mediaqueries
118 lines (89 loc) · 4.83 KB
/
README_mediaqueries
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
http://cssmediaqueries.com/overview.html
Laptop Ubuntu12, externer und interner Monitor, immer, egal wie Viewport-size:
================================================================
1 YES @media all
2 YES @media screen
3 NO @media handheld
25 YES @media all and (device-aspect-ratio: 8/5) wirkl immer!
aspect-ratio ohne device- funzt besser!
32 YES @media screen and (resolution: 96dpi)
30 YES @media all and (-webkit-device-pixel-ratio: 1)
33 NO @media all and (-webkit-device-pixel-ratio: 1.3)
35 NO @media all and (-webkit-device-pixel-ratio: 1.5)
39 NO @media all and (-webkit-min-device-pixel-ratio: 2)
40 NO @media screen and (min-resolution: 192dpi)
Laptop Ubuntu12, externer Monitor, abhaengig vom Viewport:
================================================================
12 NO @media all and (orientation:landscape) OK, gef etw zu frueh
13 YES @media all and (orientation:portrait)
14 YES @media screen and (min-width : 320px) OK, tut was es soll
15 YES @media screen and (min-width : 480px)
16 NO @media screen and (min-width : 1224px) OK, etwa 2/3 Breite
Laptop Ubuntu12, eigener Monitor, abhaengig vom Viewport:
================================================================
das gleiche (min-width : 1224px) ist fast ganze Breite OK
Samsung Smartphone, portrait gehalten
================================================================
1 YES @media all
2 YES @media screen
3 NO @media handheld !! wirklich => nicht verwenden!
12 NO @media all and (orientation:landscape) OK
13 YES @media all and (orientation:portrait) OK
14 YES @media screen and (min-width : 320px)
15 NO @media screen and (min-width : 480px) OK, gutes Merkmal!
27 YES @media all and (device-aspect-ratio: 9/16) !! zu viele Var
32 NO @media screen and (resolution: 96dpi) OK
30 NO @media all and (-webkit-device-pixel-ratio: 1)
33 YES @media screen and (-webkit-device-pixel-ratio: 1.3)!!
35 NO @media all and (-webkit-device-pixel-ratio: 1.5)
39 YES @media all and (-webkit-min-device-pixel-ratio: 2) OK, gut!
40 YES @media screen and (min-resolution: 192dpi) OK, gut!
Samsung Smartphone, landscape gehalten, Unterschiede zu Portrait
================================================================
12 YES @media all and (orientation:landscape) OK, diff!
13 NO @media all and (orientation:portrait) OK, diff!
15 YES @media screen and (min-width : 480px) OK, diff!
27 NO @media all and (device-aspect-ratio: 9/16)
!!changes, although "device"
Samsung Smartphone, landscape gehalten, Unterschiede zu Notebook Landscape
================================================================
32 NO @media screen and (resolution: 96dpi) OK
30 NO @media all and (-webkit-device-pixel-ratio: 1)
33 YES @media screen and (-webkit-device-pixel-ratio: 1.3)!!
39 YES @media all and (-webkit-min-device-pixel-ratio: 2) OK, gut!
40 YES @media screen and (min-resolution: 192dpi) OK, gut!
(ausser device-aspect-ratio, da nichtsnutz!)
mein IPad, portrait gehalten
================================================================
1 YES @media all
2 YES @media screen
3 NO @media handheld !! wirklich => nicht verwenden!
12 NO @media all and (orientation:landscape) OK
13 YES @media all and (orientation:portrait) OK
14 YES @media screen and (min-width : 320px)
15 YES @media screen and (min-width : 480px) OK, gutes Merkmal!
22 YES @media all and (device-aspect-ratio: 3/4) !! zu viele Var
27 NO @media all and (device-aspect-ratio: 9/16) !! zu viele Var
32 NO @media screen and (resolution: 96dpi) OK
30 NO @media all and (-webkit-device-pixel-ratio: 1)
33 YES @media screen and (-webkit-device-pixel-ratio: 1.3) auch hier
35 NO @media all and (-webkit-device-pixel-ratio: 1.5)
39 YES @media all and (-webkit-min-device-pixel-ratio: 2) OK, gut!
40 NO @media screen and (min-resolution: 192dpi) OK, nur Smartphone!
mein IPad, landscape gehalten, Unterscchiede
================================================================
12 NO @media all and (orientation:landscape) OK
13 YES @media all and (orientation:portrait) OK
22 YES !!! bleibt im Ggs zu Smartphone gleich!!
=> forget aspect-ratio! nutze grundsaetzlich orientation und
landscape, kann damit leide rnicht feiner tunen, aber icherheit geht
vor!
mein IPad, orientierungs- und groessenunabhaengige Unterschiede zu Notebook
================================================================
32 NO @media screen and (resolution: 96dpi) OK
33 YES @media screen and (-webkit-device-pixel-ratio: 1.3) auch hier
39 YES @media all and (-webkit-min-device-pixel-ratio: 2) OK, gut!
mein IPad, orientierungs- und groesseunabhaengige Unterschiede zu Smartphone
================================================================
15 YES @media screen and (min-width : 480px) OK, gutes Merkmal!
40 NO @media screen and (min-resolution: 192dpi) OK, nur Smartphone!