fullscreen api is not working in ios safari and chrome. I am trying to show a image in full screen but its not working in ios safari, could anyone help me on the same. Am i using the right property of document.

function getBrowserFullscreenElementProp() {
  if (typeof document.fullscreenElement !== "undefined") {
    return "fullscreenElement";
  } else if (typeof document.mozFullScreenElement !== "undefined") {
    return "mozFullScreenElement";
  } else if (typeof document.msFullscreenElement !== "undefined") {
    return "msFullscreenElement";
  } else if (typeof document.webkitFullscreenElement !== "undefined") {
    return "webkitFullscreenElement";
  } else {
    throw new Error("fullscreenElement is not supported by this browser");
  }
}

Tried

function getBrowserFullscreenElementProp() {
  if (typeof document.fullscreenElement !== "undefined") {
    return "fullscreenElement";
  } else if (typeof document.mozFullScreenElement !== "undefined") {
    return "mozFullScreenElement";
  } else if (typeof document.msFullscreenElement !== "undefined") {
    return "msFullscreenElement";
  } else if (typeof document.webkitCurrentFullScreenElement !== "undefined") {
    return "webkitCurrentFullScreenElement";
  } else {
    throw new Error("fullscreenElement is not supported by this browser");
  }
}

fullscreen api is not working in ios safari and chrome. I am trying to show a image in full screen but its not working in ios safari, could anyone help me on the same. Am i using the right property of document.

function getBrowserFullscreenElementProp() {
  if (typeof document.fullscreenElement !== "undefined") {
    return "fullscreenElement";
  } else if (typeof document.mozFullScreenElement !== "undefined") {
    return "mozFullScreenElement";
  } else if (typeof document.msFullscreenElement !== "undefined") {
    return "msFullscreenElement";
  } else if (typeof document.webkitFullscreenElement !== "undefined") {
    return "webkitFullscreenElement";
  } else {
    throw new Error("fullscreenElement is not supported by this browser");
  }
}

Tried

function getBrowserFullscreenElementProp() {
  if (typeof document.fullscreenElement !== "undefined") {
    return "fullscreenElement";
  } else if (typeof document.mozFullScreenElement !== "undefined") {
    return "mozFullScreenElement";
  } else if (typeof document.msFullscreenElement !== "undefined") {
    return "msFullscreenElement";
  } else if (typeof document.webkitCurrentFullScreenElement !== "undefined") {
    return "webkitCurrentFullScreenElement";
  } else {
    throw new Error("fullscreenElement is not supported by this browser");
  }
}

• javascript

• This code returns a string or throws an exception. What is your question? – Thomas Sablik Commented May 8, 2021 at 19:43
• it checks for a property webkitFullscreenElement but i am not able to get it in ios safari, it goes to exception since property is not found – dev Commented May 8, 2021 at 19:47
• I have updated the function, so the use case is i have an image when i click on the image i need to make the image to full screen mode its working in chrome but in ios phone getting exception – dev Commented May 8, 2021 at 19:49
• Does this answer your question: Is there a way to tell whether Safari is fullscreen? (e.g. document.fullscreenElement) – Thomas Sablik Commented May 8, 2021 at 19:49
• I have tried this still error exception – dev Commented May 8, 2021 at 19:50

2 Answers 2

As per can i use: Safari for iPhone does not support the fullscreen API.

  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else if (document.exitFullscreen) {
    document.exitFullscreen();
  }