changeset 231:2731d2d8400e

Set meta viewport tag and initial scale, and try to "fix" things for some mobile devices/browsers while probably breaking things for others. Also, setting the initial scale seems to break the Android Chrome "text size autoboost" prevention in the CSS ... sigh. :S Set the text-size-adjust values to 100% anyway.
author Matti Hamalainen <ccr@tnsp.org>
date Mon, 26 Mar 2018 17:06:12 +0300
parents 6b34b61b956b
children e618280253ca
files basic.css mgallery.php
diffstat 2 files changed, 9 insertions(+), 6 deletions(-) [+]
line wrap: on
line diff
--- a/basic.css	Mon Mar 26 17:03:48 2018 +0300
+++ b/basic.css	Mon Mar 26 17:06:12 2018 +0300
@@ -6,13 +6,13 @@
  */
 html {
 	/* Prevent automatic text size adjustment, which happens on some mobile browsers. */
-	-webkit-text-size-adjust: none;
-	-moz-text-size-adjust: none;
-	-ms-text-size-adjust: none;
+	-webkit-text-size-adjust: 100%;
+	-moz-text-size-adjust: 100%;
+	-ms-text-size-adjust: 100%;
 }
 
 body {
-	font-size: 14px;
+	font-size: 0.9em;
 	font-family: Verdana, Arial, helvetica, sans-serif;
 
 	color: white;
@@ -428,14 +428,14 @@
 	 */
 	@media (orientation: landscape) {
 		body {
-			font-size: 18px;
+			font-size: 1em;
 		}
 	}
 
 
 	@media (orientation: portrait) {
 		body {
-			font-size: 24px;
+			font-size: 1.4em;
 		}
 
 		div.galleryEntry {
--- a/mgallery.php	Mon Mar 26 17:03:48 2018 +0300
+++ b/mgallery.php	Mon Mar 26 17:06:12 2018 +0300
@@ -133,6 +133,9 @@
     "<html>\n".
     "<head>\n".
     "  <meta charset=\"".$pageCharset."\">\n".
+    // Setting the viewport makes things break especially with the
+    // text-size-adjust CSS settings... so we don't use it.
+    "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n".
     "  <script type=\"text/javascript\" src=\"".mgMangleURI($pageJSFile)."\"></script>\n".
     "  <title>".strip_tags($pageTitle)."</title>\n".
     mgGetCSSLine($pageCSS, FALSE).