Почему мой веб-сайт ничего не отображает на мобильном телефоне, если я добавлю это заявление if?

У меня есть веб-страница. Я добавил инструкцию 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, холст не будет рисовать вообще, когда ширина и высота окна достаточно велики. Если я просто удалю два утверждения и не волнуюсь о размерах окна, все отлично работает на компьютере и на мобильных устройствах. Что происходит?

FYI: 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.

Рабочая версия

Нерабочий

Если вы попробуете этот случайный онлайн-симулятор 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();
      }
            }

Я (несколько) сузил вопрос. В приведенном выше коде квадрат рисуется на iOS, если я раскомментирую строку ctx.font, но не, если он прокомментирован. В моей полной игре, если я это сделаю, границы будут нарисованы, но буквы все еще нет.