What is common way to hide a website link, when in mobile view?

[ChrisjChrisj]

What is common/simple way to hide a website page link, when in mobile view?

for example, how to hide something this:

<a href="https://../webcam.html">LINK</a>

[SamA74]

You could apply a class to the link.
In a “mobile size” CSS media query, hide the class with display: none.

Other methods to detect mobile would involve “browser/device sniffing”, but that’s not a HTML & CSS answer.

[ChrisjChrisj]

Thanks for your reply/help.

So, I tried this, and on a mobile phone view and the link was not displayed.
But, of course when I turn the phone horizontally, the link appears:

@media screen and (max-width: 600px) {
  .webcam {
    display: none;
  }
}

so, what would you recommend if I wanted the link to not display on most mobile devices, yet display on desktop views?

[donboe]

Simply extend your max-width to your liking. Now a days there are so many devices. Tablets up to 13 inch

[PaulOB]

@ChrisjChrisj

What is common/simple way to hide a website page link, when in mobile view?

Why would you want to hide a link from mobile viewers? What is your criteria for deciding that mobile viewers should not see that link?

Once we understand the reasons for hiding the link then you can come up with a plan for hiding it.

It may be that perhaps you should be using feature detection instead of mobile detection as mobile viewers are not a lot of different from laptop or desktop viewers. Some phones are bigger than small tablets.

Is the link you want to hide just being hidden because of lack of screen space? If so then media queries are the way to go.

If however the link is only applicable to certain devices then we need to work out the best way to do that. There is no easy way to detect for mobile usage although you can get certain information with JS but browsers often lie about what they can do so is not 100% reliable.

[ChrisjChrisj]

Thanks for your reply.
The webcam link is not applicable to mobile viewers, just to desktop viewers.
So, yes, the link is only applicable to certain devices.
Any additional help is appreciated

[PaulOB]

@ChrisjChrisj

The webcam link is not applicable to mobile viewers, just to desktop viewers.

That doesn’t really answer my question

What are you calling mobile viewers?

Those with mobile phones?

Tablets that can access mobile data plans?

Laptops and PCs that have mobile data plans?

Windows 11 Computers: Desktops, 2-in-1 PCs & More | Microsoft

@ChrisjChrisj

The webcam link is not applicable to mobile viewers,

Nearly all phones have cameras (more so than desktop) so I can’t quite make the connection between what you are doing and why it doesn’t apply to some devices?

If you can explain why the link is not applicable to mobile viewers it might help with working out a plan to solve the problem.

If you simply don’t want small screens to see the link then decide on a width that you don’t want it to be seen at. You can use a media query based on device-width rather than screen width and also specify portrait and landscape orientation etc.

[ChrisjChrisj]

Thanks for your message.
I have two web pages, one web page where a desktop user would click to select their web cam camera and proceed to record via rtc, then upload to the web site. And one web page where a mobile user would tap or touch to select their camera and proceed to record, then upload to the web site.

[PaulOB]

@ChrisjChrisj

I have two web pages, one web page where a desktop user would click to select their web cam camera and proceed to record via rtc, then upload to the web site. And one web page where a mobile user would tap or touch to select their camera and proceed to record, then upload to the web site

It doesn’t really seem that this would be a CSS or html question and indeed doesn’t seem to be a purely mobile question for the reasons I already mentioned. You still haven’t clarified what you are classing as mobile users and what makes them so different that you need to hide things from them?

If perhaps you were detecting touch devices (which includes all mobile, most tablets and some desktops and laptops) then you can detect for touch enabled devices and add a class to utilize changing the display.

I’m afraid I don’t know anything about cameras or webcams but would have assumed the routines for both would be much the same (perhaps with some js feature detection). Why would you need separate pages? Surely both can be handled in the same routines. Maybe this link helps.

This seems to be more of a programming question than a straight forward screen size question.

If you want to catch most hand held mobile users then just use a media query with a max-width of about 850px but as mentioned that will miss most tablets and laptops. It is not clear what feature you are trying to negotiate around…

[ChrisjChrisj]

Thanks again for your replies.
Yes, after doping a bit more research it seems it may be better suited not as a html css question.

I cam across this:

function isMobileDevice() {
    return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
};

any help with how I would apply this to
if mobile - shows this link,
if not mobile - show the other link,
would be appreciated.

[PaulOB]

@ChrisjChrisj

function isMobileDevice() { return (typeof window.orientation !== “undefined”) || (navigator.userAgent.indexOf(‘IEMobile’) !== -1); };

I guess you would do something like this but is a question for the JS forum.

I’m not sure how reliable that method is so you will need to test.

[m_hutley]

Well, I think Mozilla can offer an insight as to the efficacy of such a method, Paul.

There is this, which claims to be able to detect device types, though I’m not going to give an opinion one way or the other as to the efficacy, as I’ve never used the “API” myself, and frankly their code is long enough that even I TLDR’d it.

[PaulOB]

@m_hutley

though I’m not going to give an opinion one way or the other as to the efficacy,

Thanks glad you jumped in.

As I’ve been saying in the thread detecting devices is usually not the right approach. :;

[SamA74]

It sounds like “feature detection”, as in the camera.
Is it making the distinction between a built-in camera like some mobiles and laptops have, and a plug in camera like a desk-top may use?
I guess we need to understand the “why” first.

[PaulOB]

@SamA74

I guess we need to understand the “why” first.

@SamA74

I guess we need to understand the “why” first.

Yes I’ve asked that question several times now but don’t get an answer that helps

[ChrisjChrisj]

Thanks again for the replies.

Regarding ‘why’, currently, there are two separate web pages that a User can link to, the webcam page has webRTC code where a user can record via webcam. If you select the link via a mobile phone, the webcam doesn’t display.

If you select the mobile link from a desktop the mobile camera doesn’t display. The mobile page has code like this:

<input type="file" name="fileToUpload" id="fileToUpload" accept="video/*" capture="user" onchange="submitForm();">

So, it all works successfully, it just might be confusing for a User, that’s why I’m trying to just have the corresponding link appear from the correct device, if possible.