針對iPhone和iPad的媒體查詢不能與畫布一起使用html5

我正在使用與我的網頁重疊的畫布html5。針對iPhone和iPad的媒體查詢不能與畫布一起使用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-->

我試圖通過媒體查詢來隱藏移動設備上的畫布。

它工作時我調整屏幕我的桌面上，無論是在Chrome和Safari瀏覽器，而不是在我的iPhone！

我試圖找到一個解決方案，但沒有運氣。

UPDATE

媒體查詢僅適用於在桌面調整。當我調整窗口的大小並重新加載頁面時，這會顯示畫布，直到我再次調整窗口大小。然後我意識到這個問題是由於我通過javascript顯示畫布上的負載這一事實。我不確定如何在移動設備上停止此操作，但是我不知道如何在移動設備上停止此操作。

來源

2017-05-01 F.S.

的可能的複製[媒體查詢不工作的iPhone和iPad（http://stackoverflow.com/questions/14818277/media-query-not-working-for-iphone-and-ipad） – Niraj

您是否在<head>中添加了視口元素？

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

旁註：我會使HTML多一點語義，而不是每個元素都使用div。見： https://www.w3schools.com/html/html5_semantic_elements.asp

來源

2017-05-01 10:54:29

Hi @fons我已使用我的中的視口元素，但它仍然無法工作。 –

你可以看看[this]（http://stephen.io/mediaqueries/）關於Ipad和Iphone的媒體查詢的文章。請注意@media ** only **屏幕和....在這裏使用 –

感謝您的回覆。我認爲這個問題是由於canvas通過javascript加載顯示並且媒體查詢被忽略的事實。當我在桌面上調整頁面大小時，它可以工作。我將需要修復JavaScript代碼。 –

針對iPhone和iPad的媒體查詢不能與畫布一起使用html5

回答

相關問題