学ios 需要学html5me,html - Full screen api HTML5 and Safari (iOS 6) - Stack Overflow

Six years after this question was asked..., the "webkit"-prefixed fullscreen API now seems to work in mobile Safari in iOS 12.1 on an iPad, but not on an iPhone. It doesn't seem to be reported yet at CanIUse, and the only Apple information I've found so far are line items regarding iOS 12 in the "What's New in Safari" page and release notes and a tweet:

Yesterday, I updated my iPhone and iPad to iOS 12.1 from iOS 11.x. The full screen API is working for me in Safari on the iPad but not the iPhone. On the iPad, "alert(document.fullscreenEnabled)" displays "undefined", but "alert(document.webkitFullscreenEnabled)" displays "true". On the iPhone, both display "undefined".

Playing with the following script, I'm able to display in full screen mode in Safari on the iPad.

#target {

width: 150px; height: 100px; padding: 50px 0 0 0;

margin: 50px auto; text-align: center;

background-color: tan;

}

Click or touch me

(function(w) {

"use strict";

var d = w.document;

var t = d.getElementById("target");

t.addEventListener("click", function() {

d.documentElement.webkitRequestFullscreen();

// Compare alternative to preceding line, calling

// method on target element instead:

// t.webkitRequestFullscreen();

// And compare changing target's style on change:

// t.style.width = "100%";

// t.style.height = "100%";

});

// alerts "undefined" in iOS 12.1 Safari on iPad and iPhone

alert(d.fullscreenEnabled);

// alerts "true" in iOS 12.1 Safari on iPad, "undefined" on iPhone

alert(d.webkitFullscreenEnabled);

}(window));

Upon displaying in full screen, Safari on the iPad inserts an "X" UI element in the upper left corner to touch for exiting full screen.

Playing with the demo page of a 2014 full screen API tutorial at Site Point worked well on my iPad also. Beware, playing with the older, outdated demo page of the 2012 version of the Site Point tutorial twice froze my iPad in Safari, and I had to reboot the iPad to escape.

Playing with the demo page of the screenfull.js library worked well on my iPad too.