joda

Seeking help with responsive design

Recommended Posts

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 jason@jasonoda.com if interested. Thank you.

Share this post


Link to post
Share on other sites

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.

scaleFit1.jpg

scaleFit2.jpg

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.