Remove element if Safari/iOS - javascript

I am creating a website where I have created a fullscreen button, which can be kind of useful on mobile - at least for my website. This is done through some Javascript. However, if I'm not mistaken, this fullscreen mode does not work in Safari (or maybe just iOS in general). So basically, I would like to remove the button in those cases, since it doesn't work for them.
Can this be accomplished with CSS, or do I need some Javascript as well ?


I think this is what you are looking for:
#supports (-webkit-touch-callout: none) {
/* CSS specific to iOS devices */
}
#supports not (-webkit-touch-callout: none) {
/* CSS for other than iOS devices */
}
CSS media query to target only iOS devices

Related

How to disable/remove specific controls in the UI of safari native video player in fullscreen mode?

When going fullscreen in IOS safari mobile (IOS 16), I have a case where I want to remove the option for the subtitle selector due to a certain issue with the video source.
I've used the safari remote inspector and noticed the shadow DOM inside the video tag, however after experimenting with many pseudo selectors, none had an effect to hide any of the controls.
audio::-webkit-media-controls-toggle-closed-captions-button {
display: none;
}
video::-webkit-media-controls-toggle-closed-captions-button {
display: none;
}
However I recently noticed that youtube in safari has managed to hide the option entirely when going fullscreen, see attached image below
So is it possible to customize the native controls for IOS in fullscreen mode?

CSS media query display-mode: fullscreen does not work on safari

CSS media query display-mode:fullscreen does not work on safari (the css inside the media query never gets applied). Current safari version: Version 14.1.
#media all and (display-mode: fullscreen) {
...
}
Full example here: https://jsfiddle.net/gnbcv6em/3/
It works on chrome but not safari. I've tried triggering fullscreen with the browser's fullscreen keyboard shortcut or by triggering it manually with js, but neither works on safari.
Also, https://developer.mozilla.org/en-US/docs/Web/CSS/#media/display-mode shows that safari supports it.
Perhaps someone has come across this issue and can help?

Faced with the same issue. Solved by this:
body:-webkit-full-screen .selector {
display: none;
}
And SCSS version (if you have nested selectors):
#at-root body:-webkit-full-screen & {
display: none;
}
At this moment Safari doesn't support :fullscreen selector, so need to use :-webkit-full-screen.

Separate javascript for different devices

Is there a way I can call on different javascript files or lines depending on which device you view the site on? Like media queries for css.

there are a few general approaches to this:
enable features based on browser capabilities
check the user agent string on the server and return different scripts
detect IE with special comments
I recommend the first approach using modernizr http://modernizr.com/
EDIT:
detecting a touch aware browser with modernizr:
modernizr will add class="touch' to the body
$('.touch #popup).hide() // hide "popup" only on touch devices

Devices in context of platforms such as android, iphone, ipad, ie mobile etc, we can simply check as:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// here is your javascript code....
}
Hope, devices means to be worked as above....

Can you detect if Cleartype is enabled on PC via javascript?

Some #font-face fonts don't play nice with non-cleartype settings (gets really choppy on the edges)
Is there a way to detect this via javascript so that I can do a modernizr-style class addition to the body if cleartype is off so I can use this in my CSS

In IE 6+ you can check the screen.fontSmoothingEnabled property. Otherwise you need to use an html 5 canvas to check for this.
Details here.

designMode or contentEditable on mobile safari [duplicate]

Safari HTML Reference: Supported Attributes says:
contenteditable
If true, the element can be edited on
the fly; if false, it cannot.
Availability
Available in Safari 1.2 and later.
Available in iPhone OS 1.0 and later.
However, on my iPhone, I can't get it to work. Anyone have success with this?
You can try it with this document (admittedly not pure html, but that document works in desktop Safari, and Chrome and Firefox 3). I haven't been able to get even the simplest html document to be editable in mobile Safari.

contenteditable has been added to iOS 5 beta 2, according to one of the developer videos from WWDC 2011. I suggest signing up to Apple's Safari developer program and downloading that video from the WWDC videos page.
If you sign up to be a Safari dev, you also gain the privilege to submit your Website to their online iOS Web app gallery.
Edit: I've confirmed this works on my iPad running iOS 5.0.1. Try it out here: http://www.quirksmode.org/dom/execCommand/

It works, kind of. I thought contenteditable doesn't work on iPhone before. When I set a div to contenteditable I couldn't move the cursor/pointer to where I wanted to move it. But, when I was fiddling around XHTML with contentEditable within iBooks.app on iPad, I found that "execCommand('insertText', null, 'foobar');" worked within Mobile Safari.

If you wanted to, you could make a virtual keyboard using
clever css and javascript, and make it into a bookmarklet.

If you cannot focus the contenteditable element try adding this to your css
[contenteditable] {
-webkit-user-select: text;
user-select: text;
}

The design mode and content editable are working fine in IOS 5.But in previous versions it is not working.There is post
http://mobile.tutsplus.com/tutorials/mobile-web-apps/safari-5_html5/

I think this is because editing HTML requires quite an advanced user interface. That's why desktop Safari implements it, while Mobile Safari doesn't.

Categories