https://kotlinlang.org logo
Join Slack
Powered by
Compose Wasm so cool :heart: Just deployed sample ...
# compose-web
y
Compose Wasm so cool ❤️ Just deployed sample Tiamat (compose mutliplatform navigation library) on Github Pages Demo: https://composegears.github.io/Tiamat/ Source code: https://github.com/ComposeGears/Tiamat
👏 4
🔥 4
c
Does this work on iOS iPad?
y
Safari doesn't support Wasm yet, also mobile browsers
👍 1
c
On my old android pixel 3, it works great in chrome. Just not current version on Safari. Older versions worked, so I’m sure it’s only a matter of time before it’s fixed again. I’ve even been able to create a simple fix for the screen orientation changes and pixel ratios. It’s in my github.
y
I've even been able to create a simple fix for the screen orientation changes and pixel ratios. It's in my github.
Could you please share the link for fix?
c
// index.html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!-- note: no meta viewport tag here -->
    <title>Compose App</title>
<script>
        // Sets the viewport to the correct size for mobile devices
        window.addEventListener("load", function(){ onLoad() } );
        function onLoad() {
           window.setTimeout(function() {
              const meta = document.createElement('meta');
              meta.name = "viewport";
              meta.content = "width=" + (window.screen.width * window.devicePixelRatio) / 2 + ", initial-scale=1";

              document.head.appendChild(meta);
           }, 0);
        }
</script>
...
from here: https://github.com/realityexpander/KMPMensAdventure/blob/5172de6c9d9db36517aae70516cdcdb5f071d8f7/composeApp/src/wasmJsMain/resources/index.html#L63 Note: this is a test application, this is a simple app to try out the compose-web alpha features.
k
Thanks for advise
y
Hello, tried provided workaround and it's not really fix the scale issue on mobile browsers. Will wait more updates from Compose Multiplatform side🙂
c
I’ve only tried it on Chrome browsers on my Android devices, and it works well so far. What mobile browsers are you trying?
y
Latest Chrome (Pixel 7 Pro)
👍 1
c
OK, I tested it a bit more, and I must say again this is a work around… I’m sure the compose-web team knows about this issue… but for now, it seems to work well. Let me know what you find out in your experience! It’s also in the same repo: https://github.com/realityexpander/KMPMensAdventure/blob/91e9bedef3e006c908fe706d56a4edd7540bb902/composeApp/src/wasmJsMain/resources/index.html#L60
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
   <script>
        window.addEventListener("load", function(){ onLoad() } );
        // Sets the viewport to the correct size for mobile devices
        function onLoad() {
           window.setTimeout(function() {
             // Replace the default viewport for mobile with one that uses the devicePixelRatio
             let meta = document.querySelector('meta[name="viewport"]')
             meta.content = calcMetaViewportContent(innerWidth);
             document.head.appendChild(meta);
           }, 5);
        }
        
        screen.orientation.addEventListener("change", (event) => {
          const type = event.target.type;
          const angle = event.target.angle;
          var calcWidth;

          // Reset to default viewport for mobile
          let meta = document.querySelector('meta[name="viewport"]')
          meta.content = "width=device-width, initial-scale=1";

          // Adjust the viewport for mobile after orientation change.
          setTimeout(() => {
             meta.content = calcMetaViewportContent();
          }, 50);
        });
        
        function calcMetaViewportContent(actualWidth) {
           var calcWidth;

           if(actualWidth != undefined) {
              calcWidth = actualWidth;
           } else {
              if (screen.orientation.type.includes("landscape")) {
                 calcWidth = screen.height;
              } else {
                 calcWidth = screen.width;
              }
           }

           return "width=" + ((calcWidth * window.devicePixelRatio)/2) + ", initial-scale=1.0";
        }
</script>
<!-- Rest of your html -->
a
Tried it on my project:
screen-20240515-063846.mp4
There are some glitches on the UI... What could cause that?
h
Hi @Chris Athanas, Your solution works for: • Web (chrome + Safari + Firefox) • Android Chrome (didn't check the Firefox) However it shows double screen size on iPhone: • Chrome and Safari • Only loading screen on Android Chrome Do you have any idea what can be the reason? I will try to debug, however your support would be really helpful! I assume the problem is coming from 
window.devicePixelRatio
, but even after replacing it with this function it still didn't work. The website is: https://passaporteaupair.com/
a
Heads up there was a new release yesterday which fixed some sizing issues for me. worth checking
👍 1
h
• Updated kotlin to 
2.0.0
• Added plugin 
org.jetbrains.kotlin.plugin.compose
• updated 
org.jetbrains.compose
to 
1.6.10
• updated 
androidx.compose.ui:ui-tooling
to 
1.6.7
Wrapped the UI into 
ComposeViewport
The results are as follows: • Web browsers look good, as previously • Android Emulator Chrome cuts the top and gets zoomed view of Web mode(However should show Mobile view) • iOS phone shows Web mode but the bounds are correct Given that I've got a check like this, it already doesn't make sense for me at all what can be the reason. Any ideas?
Copy code
val screenWidth = with(LocalDensity.current) {
        LocalWindowInfo.current.containerSize.width.toDp()
    }
    
    if(screenWidth< 840.dp){
        LandingMobileMode(component)
    }else{
        LandingWebMode(component)
    }
Source code: https://github.com/hayk-kerobyan/srcpassaporteaupair
👀 1
c
I think I saw this reported and will be fixed for 
wasm
target at some point. I switched to the 
js
target, and it doesn’t have the same viewport sizing problem (as far as I can tell) and it also works on Safari browsers for desktop and iOS.
27 Views
Open in Slack
PreviousNext
Powered by