sindresorhus / screenfull

Simple wrapper for cross-browser usage of the JavaScript Fullscreen API
https://sindresorhus.com/screenfull
MIT License
7.08k stars 698 forks source link

Iphone safair support webkitEnterFullscreen. #221

Open TianbinTobin opened 1 year ago

TianbinTobin commented 1 year ago

Iphone safair support webkitEnterFullscreen, not webkitRequestFullscreen

DmytroShulzhenko commented 1 year ago

Can you add webkitEnterFullscreen for supporting full screen mode for Iphones?

justingolden21 commented 1 year ago

+1 to this, not working on iphone

WINOFFRG commented 1 year ago

+1 Much Needed, Currently have to work with webkitEnterFullscreen and webkitExitFullscreen

chrisandrews7 commented 1 year ago

+1

BePo65 commented 1 year ago

There seems to be a small bug in the screenfull code (lines 14 and 24):

For apple / safari it uses webkitRequestFullscreen (in compliance with mdn and CanIuse).

But according to the apple documentation, safari not only requires the webkit prefix, but also uses a different wording: webkitEnterFullscreen.

justingolden21 commented 1 year ago

If I (or someone else) make a PR for this, is there any chance it would be merged?

@ screenfull team

aquinoWill commented 9 months ago

+1

BePo65 commented 9 months ago

I will prepare a pr for this; only testing on ios is a little bit difficult for me.

baharev commented 9 months ago

I have tested it on an iPhone with Safari 17.2 and based on my own experiments and on the official docs:

webkitEnterFullscreen is only available for the HTMLVideoElement as of Feb 9, 2024.

It makes little sense to me, since full screen is the default for the video element on the iPhone and you have to opt-out by specifying playsinline if you don't want that. The video element also has its own control to toggle the full screen mode, making webkitEnterFullscreen superfluous.

For other HTML elements, webkitEnterFullscreen seems to be absent on the iPhone.

Long story short: Even if webkitEnterFullscreen is added to screenfull library, it won't make a difference on an iPhone.

BePo65 commented 9 months ago

Perhaps I can help with a little web page that shows the fullscreen features available on 'your' browser.

baharev commented 9 months ago

Perhaps I can help with a little web page that shows the fullscreen features available on 'your' browser.

I don't get the point you are trying to make but here is a screenshot made on that iPhone with Safari 17.2

IMG_4950

BePo65 commented 9 months ago

The page just proves that iPhone does not support the Fullscreen API (besides for HTMLVideoElement) as you said before and thus a or is useless.

cay-cospete commented 8 months ago

I have tested it on an iPhone with Safari 17.2 and based on my own experiments and on the official docs:

webkitEnterFullscreen is only available for the HTMLVideoElement as of Feb 9, 2024.

It makes little sense to me, since full screen is the default for the video element on the iPhone and you have to opt-out by specifying playsinline if you don't want that. The video element also has its own control to toggle the full screen mode, making webkitEnterFullscreen superfluous.

For other HTML elements, webkitEnterFullscreen seems to be absent on the iPhone.

Long story short: Even if webkitEnterFullscreen is added to screenfull library, it won't make a difference on an iPhone.

Why is that playsInline attribute is correlated with fullscreen mode on Safari ? Also, why is that adding webkitEnterFullscreen in the fullscreen library wont make a difference ?

BePo65 commented 8 months ago

Also, why is that adding webkitEnterFullscreen in the fullscreen library wont make a difference ?

If you take a look at my testpage with an iPhone (I don't have one available): what does it say for 'webkitEnterFullscreen'?

cay-cospete commented 8 months ago

Also, why is that adding webkitEnterFullscreen in the fullscreen library wont make a difference ?

If you take a look at my testpage with an iPhone (I don't have one available): what does it say for 'webkitEnterFullscreen'?

It says unavailable for all but i am trying to understand why ?, when i tested on iphone 12 pro on browserstack by attaching this api on the browser console it worked fine

BePo65 commented 8 months ago

Ok, I think I understand.

What this 'demopage' does is feature detection. for the fullscreen API. As webkitRequestFullscreen and webkitEnterFullscreen are features of an element, I test the availability for a div element based on code found in MDN:

"webkitRequestFullscreen" in  window.document.createElement('div');
"webkitEnterFullscreen" in  window.document.createElement('div');

Hope this helps.