Seeking help with responsive design

[joda]

I'm a former Flash person that has just built my first html5 browser game for a client. Everything is running great except that I don't seem to be able to get it to size properly on all mobile platforms. I can get it to size properly on Safari & iPhone, but that's about it. I'm looking to pay $100 for someone to make my game responsive on mobile (iphone, android, etc) in as many browsers as possible. I'd also like you to explain it to me in the end. This is flat rate job. I am paying for results and not time. Please contact [email protected] if interested. Thank you.

[sofia1970]

Hi,

I can help out.
Please check PM.

Best Regards,
Sofia G

[joda]

Here are some more details about what I'm looking for. This is not developed in phaser or pixi.

I have 2 bits of code that help this work. The first is on index.html. It only works on iphone which is part of the problem.

This second script is in index.js. It changes the size of the canvas to the browser size. Not sure if this is the smartest way to deal with things, but this is the best solution I was able to come up with.

<script>
  //a
  window.document.addEventListener(
    "orientationchange",
    function() {
      var iOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/g);
      var viewportmeta = document.querySelector('meta[name="viewport"]');
      if (iOS && viewportmeta) {
        if (viewportmeta.content.match(/width=device-width/)) {
          viewportmeta.content = viewportmeta.content.replace(
            /width=[^,]+/,
            "width=1"
          );
        }
        viewportmeta.content = viewportmeta.content.replace(
          /width=[^,]+/,
          "width=" + window.innerWidth
        );
      }
      // If you want to hide the address bar on orientation change, uncomment the next line
      window.scrollTo(0, 0);
    },
    false
  );
</script>

function resizeCanvas() {
  
  if (mobile === true) {
    var cWidth = window.innerWidth / window.devicePixelRatio;
    var cHeight = window.innerHeight / window.devicePixelRatio;
    var cAspectRatio = originalHeight / originalWidth;

    canvasWidth = cTargetWidth * bbScale;
    canvasHeight = cTargetHeight * bbScale;
    canvasWidth2 = cTargetWidth * bbScale;
    canvasHeight2 = cTargetHeight * bbScale;

    if (cWidth > cHeight) {
      var cTargetHeight = cWidth * cAspectRatio;
      var cTargetWidth = cWidth;
    } else {
      cTargetHeight = cHeight;
      cTargetWidth = cHeight * cAspectRatio;
    }
    let cCanvas = document.getElementById("gameScreen");

    cCanvas.width = cTargetWidth;
    cCanvas.height = cTargetHeight;
    
    var dpr = 1 / window.devicePixelRatio;

    ctx.scale(cTargetWidth / originalWidth, cTargetWidth / originalWidth);

    window.ctx = ctx;
  }

}

 

Right now this does not work on android due to the first one. I've also seen it have problems on iphone 10+

Each browser has very cryptic quirks that I need help overcoming. If you are familiar with these quirks please reach out.

[sofia1970]

Hello Joda,

Thank you for the details.
Let me get back to you on this.

Warm Regards,
Sofia G