iPhone和iPad的媒体查询不适用于canvas html5

Question

I'm using a canvas html5 overlapping my web page. 我正在使用HTML5画布重叠我的网页。

  <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! 当我在Chrome和Safari上都在桌面上调整屏幕大小时，它可以工作，但在iPhone上却不能！

I've tried to find a solution but with no luck. 我试图找到一种解决方案，但是没有运气。

UPDATE 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 然后我意识到问题是由于我通过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. 我不确定如何在移动设备上停止此操作。

Answer 1

Have you added the viewport element in your <head> ? 您是否已在<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. 旁注：我将使HTML更具语义，而不是对每个元素使用div。 see: https://www.w3schools.com/html/html5_semantic_elements.asp 请参阅： https ： //www.w3schools.com/html/html5_semantic_elements.asp

iPhone和iPad的媒体查询不适用于canvas html5

问题描述

1 个解决方案

解决方案1
0 2017-05-01 10:54:29

iPhone和iPad的媒体查询不适用于canvas html5

问题描述

1 个解决方案

解决方案1 0 2017-05-01 10:54:29

解决方案1
0 2017-05-01 10:54:29