"Fix" scaling of browser view on mobile and remove smaller startup image

nanaya · Dec 7, 2024 · d87b3e7 · d87b3e7
1 parent df59919
commit d87b3e7
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 14 deletions.
diff --git a/app/assets/images/iphone-startup.png b/app/assets/images/iphone-startup.png
diff --git a/app/javascript/src/classes/browser_view.coffee b/app/javascript/src/classes/browser_view.coffee
@@ -1102,9 +1102,13 @@ export default class BrowserView
       # debug("Skipping canvas blit");
       return
     @canvas.rendered_url = @img.src
-    @canvas.width = @displayed_image_width
-    @canvas.height = @displayed_image_height
+    scale = window.devicePixelRatio
+    @canvas.width = @displayed_image_width * scale
+    @canvas.height = @displayed_image_height * scale
+    @canvas.style.width = "#{@displayed_image_width}px"
+    @canvas.style.height = "#{@displayed_image_height}px"
     ctx = @canvas.getContext('2d')
+    ctx.scale scale, scale
     ctx.drawImage @img, 0, 0, @displayed_image_width, @displayed_image_height
     @canvas.show()
     @img.hide()

diff --git a/app/views/post/browse.html.erb b/app/views/post/browse.html.erb
@@ -1,21 +1,11 @@
 <% content_for :html_header do %>
-  <script type="text/javascript">
-    if(navigator.platform.indexOf("iPhone") != -1 || navigator.platform == "iPad" || navigator.platform == "iPod") // includes "iPhone Simulator"
-      document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">');
-    else
-      document.write('<meta name="viewport" content="target-densityDpi=150, user-scalable=0;">');
-
-    if(navigator.platform == "iPad")
-      document.write('<link rel="apple-touch-startup-image" href="<%= image_path "iphone-startup-ipad.png" %>">');
-    else
-      document.write('<link rel="apple-touch-startup-image" href="<%= image_path "iphone-startup.png" %>">');
-  </script>
-
   <meta name="apple-mobile-web-app-capable" content="yes" >
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
   <meta name="application-name" content="<%= CONFIG["app_name"].gsub(".", " ") %>">
   <meta name="application-url" content="/post/browse">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
 
+  <link rel="apple-touch-startup-image" href="<%= image_path "iphone-startup-ipad.png" %>">
   <link rel="apple-touch-icon" href="<%= image_path "iphone-icon.png" %>">
   <style type="text/css">
     /* iPhone tends to highlight things oddly, sometimes even highlighting the