0

I'm using a canvas html5 overlapping my web page.

  <div id="wrapper">
   <div id="copy">
    <div id="text">
     <p><span class="name">title</span><br>
    </div><!--text-->
   </div><!--copy-->
  <div class="info">
    <p><span class="holding">text</span></p>
  </div><!--info-->
 </div><!--wrapper-->
 <div id="container">
   <canvas id="canvasTop" width="512" height="512" onMouseDown="handleMouseDown(event)" onmousemove="handleMouseMove(event)" onMouseup="handleMouseUp(event)" onmouseout="handleMouseOut(event)"></canvas>
 </div><!--container-->

I'm trying to hide the canvas on mobile devices through media query.

@media screen and (max-width: 1024px){
    #container {
        display:none;
        }
    }

It works when I resize the screen on my desktop, both on Chrome and Safari, but not on my iPhone!

I've tried to find a solution but with no luck.

UPDATE

Media query works only on desktop on resize. When I resize the window to a smaller size and I reload the page, this shows the canvas until I resize the window again. I then realised that the issue is due to the fact that I show the canvas on load through javascript

window.onload = function() {
  InitCanvas();
   var  canvas = document.getElementById("canvasTop");
   $("#canvasTop").onmouseup = handleMouseUp;
   $("#canvasTop").onmousedown = handleMouseDown;
   $("#canvasTop").onmouseout = handleMouseOut;
   $("#canvasTop").onmousemove = handleMouseMove;
}

I'm not sure how to stop this on mobile though.

F.S.
  • 25
  • 1
  • 7
  • Possible duplicate of [Media Query not working for iPhone and iPad](http://stackoverflow.com/questions/14818277/media-query-not-working-for-iphone-and-ipad) – Niraj May 01 '17 at 11:35

1 Answers1

0

Have you added the viewport element in your <head>?

<meta name="viewport" content="width=device-width, initial-scale=1">

Sidenote: I would make the HTML a little more semantic instead of using div’s for every element. see: https://www.w3schools.com/html/html5_semantic_elements.asp

Fons Winters
  • 64
  • 5
  • Hi @fons I've used the viewport element in my and it's still not working. – F.S. May 01 '17 at 11:29
  • You could take a look at [this](http://stephen.io/mediaqueries/) article about media queries for Ipads and Iphones. note that the @media **only** screen and .... is being used here – Fons Winters May 01 '17 at 12:07
  • Thanks for your reply. I think this issue is due to the fact that the canvas shows on load through javascript and the media query is ignored. It works when I resize the page on desktop though. I will need to fix the javascript code instead. – F.S. May 01 '17 at 13:17