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

Question

我有一个网页。我添加了一个 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
}
}

函数关闭指令要么提醒用户，要么启动游戏。这一切都在计算机上运行良好。如果您打开上面的链接，则可以开始播放，因为您的屏幕尺寸足够大。但是，如果您在 iPad 或 iPhone 上打开该链接，则当窗口宽度和高度足够大时，根本不会绘制画布。如果我只是删除这两个语句并且不担心窗口尺寸，那么在计算机和移动设备上一切正常。发生了什么事情？

仅供参考：当用户单击"就绪"按钮时，将调用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上打开。

工作版本

非工作

如果您尝试此随机在线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不起作用，这根本不是预期的行为

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

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

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