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
      }
}

function closeInstructions提醒用户或启动游戏。这一切都适用于计算机。如果您打开上面的链接，您可以开始播放，因为您的屏幕尺寸足够大。但是，如果您在iPad或iPhone上打开该链接，则当窗口宽度和高度足够大时，画布根本不会绘制。如果我删除这两个陈述并且不用担心窗口尺寸，那么一切都可以在计算机和移动设备上正常工作。发生了什么事？

仅供参考：当用户点击＆＃34; Ready＆＃34;时，会调用closeInstructions。按钮。

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

我试过一个模拟的Android设备，它运行正常。现在我不知道为什么它不适用于我的手机和平板电脑。

EDIT 我发现什么有效，但我仍然无法理解为什么上面描述的代码没有。这是有效的：

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) {

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

Answer 2

我刚刚在Chrome设备上尝试了这个，它运行正常。

iOS设备因以意想不到的方式解析dom而臭名昭着。我真的很想看看innerWidth和innerHeight在iOS上返回的值是什么。

老实说，我真的希望这样的事能发挥作用。

    var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

//检查iOS

var iw = (iOS) ? screen.width : window.innerWidth, ih = (iOS) ? screen.height : window.innerHeight;

//使用screen.width而不是

但是在对原始帖子的评论中，你说screen.width也不起作用，并不是所有预期的行为

另一种选择是将Width / Height声明包装在setTimeout中，以便让浏览器完成它的异常解析

setTimeout(function(){
    const WIDTH = window.innerWidth;
    const HEIGHT = window.innerHeight;
},0);

如果这不起作用，您需要将iPad连接到Mac并调试浏览器。我不认为您的宽度和高度是您在宣布时所期望的。

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

2 个答案: