javascript - 如果我添加此 if 语句，为什么我的网站在移动设备上不显示任何内容？

Question

我有一个 webpage .我添加了一个 if 语句，如果窗口太小，它会发出一条消息。

const WIDTH = window.innerWidth;
const HEIGHT = window.innerHeight;
if(WIDTH<250 || HEIGHT<325){
    alert("Increase your window size and reload the page");
    function closeInstructions(){
        alert("Game is not playable at this resolution. Please reload the page once you have resized the window");
    }
}
else{
/*My main code here*/
    function closeInstructions(){
         instructionsClosed = true;
         instructions.style.display = "none";
         makeCards();//starts game
      }
}

函数 closeInstructions 要么提醒用户要么开始游戏。这一切在计算机上运行良好。如果你打开上面的链接，只要你的屏幕足够大，你就可以开始玩了。但是，如果您在 iPad 或 iPhone 上打开该链接，当窗口宽度和高度足够大时， Canvas 根本不会绘制。如果我只是删除这两个语句而不用担心窗口尺寸，那么在计算机和移动设备上一切正常。发生了什么事？

仅供引用:closeInstructions 在用户单击“就绪”按钮时调用。

此外，如果您的屏幕太小并且您尝试更改下拉值，则会出现错误，但这与我的问题无关。一切仍然在电脑上工作。但是，它不适用于全尺寸 iPad。

我在模拟的 Android 设备上试过，它运行良好。现在我不知道为什么它在我的手机和平板电脑上不起作用。

编辑 我找到了有效的方法，但我仍然不明白为什么上面描述的代码不起作用。这是有效的:

const WIDTH = window.innerWidth-30;
const HEIGHT = window.innerHeight-30;
if(WIDTH<250 || HEIGHT<325){
    alert("Increase your window size and reload the page");
}
/*** MAIN CODE (Not in else statement)***/
function closeInstructions(){
    if(WIDTH<250 || HEIGHT<325){//checks condition
        alert("Increase your window size and reload the page");
    }
    else{//runs game if screen is big enough
         instructionsClosed = true;
         instructions.style.display = "none";
         makeCards();
    }
}

上述选项有效，但现在出于兴趣我想知道为什么我以前的方法在 iPhone 和 iPad 上无法打开。

Working version

Non-working

如果您尝试 this随机在线iOS模拟器，它在这里不起作用。

   const WIDTH = window.innerWidth-30;
   const HEIGHT = window.innerHeight-30;
   if(WIDTH<250 || HEIGHT<325){
    alert("Increase your window size and reload the page");
    function closeInstructions(){
        alert("Game is not playable at this resolution. Please reload the page once you have resized the window");
            }
    }
    else{
      const ITEMS_PER_CARD = 5;
      const SIZE = (ITEMS_PER_CARD<8)?Math.floor(Math.sqrt(HEIGHT/55*WIDTH)):Math.floor(Math.sqrt(HEIGHT/55*WIDTH)*8/ITEMS_PER_CARD);
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
     function canvasStyle(){
        ctx.lineWidth=5;
        ctx.strokeStyle="#0000FF";  
        //ctx.font = SIZE*0.9+"px Times New Roman";
        ctx.textAlign="center"; 
        ctx.textBaseline = "middle";
      }
      makeCards = function(){
                canvasStyle();
                ctx.fillRect(50, 50, 50, 50);
      }
    function closeInstructions(){
         instructionsClosed = true;
         instructions.style.display = "none";
         makeCards();
      }
            }

我(稍微)缩小了问题的范围。在上面的代码中，如果我取消对 ctx.font 行的注释，则在 iOS 上绘制正方形，但如果它被注释则不会。在我的完整游戏中，如果我这样做，边框会被画出来，但字母仍然没有。

Answer 1

您的网站无法响应(可扩展)不同的分辨率或不适合移动设备。

你需要添加...

 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0">

也许……

 <meta name="HandheldFriendly" content="true">

在你的 CSS 中进一步替换......

 @media (max-width: 700px) {

与...

 @media screen and (max-width: 700px) {

最后，要获取用户的视口(viewport)大小，请使用 offsetWidth 和 offsetHeight 而不是 innerWidth 和 innerHeight。