diff --git a/doc/platforms-html5.dox b/doc/platforms-html5.dox
index aac485804..61b41360f 100644
--- a/doc/platforms-html5.dox
+++ b/doc/platforms-html5.dox
@@ -358,6 +358,7 @@ Aspect ratio | CSS class (landscape/portrait)
1:1 | @cb{.css} .mn-aspect-1-1 @ce
4:3 (1.33:1) | @cb{.css} .mn-aspect-4-3 @ce (default) / @cb{.css} .mn-aspect-3-4 @ce
3:2 (1.5:1) | @cb{.css} .mn-aspect-3-2 @ce / @cb{.css} .mn-aspect-2-3 @ce
+16:10 (1.6:1) | @cb{.css} .mn-aspect-16-10 @ce / @cb{.css} .mn-aspect-10-16 @ce
16:9 (1.78:1) | @cb{.css} .mn-aspect-16-9 @ce / @cb{.css} .mn-aspect-9-16 @ce
2:1 | @cb{.css} .mn-aspect-2-1 @ce / @cb{.css} .mn-aspect-1-2 @ce
@@ -381,6 +382,9 @@ Width | CSS class
600px | @cb{.css} .mn-width-600 @ce
640px | @cb{.css} .mn-width-640 @ce (default)
800px | @cb{.css} .mn-width-800 @ce
+960px | @cb{.css} .mn-width-960 @ce
+1024px | @cb{.css} .mn-width-1024 @ce
+1280px | @cb{.css} .mn-width-1280 @ce
For example, for a 480x640 canvas (3:4, portrait) you would use
@cb{.html}
@ce. Besides
diff --git a/src/Magnum/Platform/WebApplication.css b/src/Magnum/Platform/WebApplication.css
index 50ef9b2f9..12bec0e8b 100644
--- a/src/Magnum/Platform/WebApplication.css
+++ b/src/Magnum/Platform/WebApplication.css
@@ -118,6 +118,15 @@ body {
.mn-container.mn-width-800 .mn-sizer, #container.width-800 #sizer {
width: 800px;
}
+.mn-container.mn-width-960 .mn-sizer, #container.width-960 #sizer {
+ width: 960px;
+}
+.mn-container.mn-width-1024 .mn-sizer, #container.width-1024 #sizer {
+ width: 1024px;
+}
+.mn-container.mn-width-1280 .mn-sizer, #container.width-1280 #sizer {
+ width: 1280px;
+}
.mn-container.mn-aspect-1-1 .mn-expander, #container.aspect-1-1 #expander {
padding-bottom: 100%;
@@ -136,9 +145,15 @@ body {
.mn-container.mn-aspect-2-3 .mn-expander, #container.aspect-2-3 #expander {
padding-bottom: 150%;
}
+.mn-container.mn-aspect-16-10 .mn-expander, #container.aspect-16-10 #expander {
+ padding-bottom: 62.5%
+}
.mn-container.mn-aspect-16-9 .mn-expander, #container.aspect-16-9 #expander {
padding-bottom: 56.25%
}
+.mn-container.mn-aspect-10-16 .mn-expander, #container.aspect-10-16 #expander {
+ padding-bottom: 160%
+}
.mn-container.mn-aspect-9-16 .mn-expander, #container.aspect-9-16 #expander {
padding-bottom: 177.7778%
}