Greetings.
I am using window.matchMedia to remove certain elements from a page.
To be more specific:
if (window.matchMedia("(max-width: 399px)").matches) {
document.getElementById("seg").remove();
document.getElementById("ter").remove();
}
It works fine in all browsers but not in IPhone 5.
I have tried different solutions and approaches to no avail.
I would appreciate some help or comment on this issue.
Best regards.
Andres
Why not use css media queries for this like everyone else?
@media screen and (max-width: 399px) {
#seg, #ter { display: none }
}
Because your solution does not remove anything; just hides it.
Besides, I need to use this same method or a valid one to insert elements in screens lower than 399px. Elements that cannot be in the DOM in higher resolutions.
Regards.
Why can they not be in the DOM? Help us understand the logic here 
. For the user, they see no difference between it not being in the DOM, and display:none.
The same can be used to unhide on small screens.
.small-only { display: none }
@media screen and (max-width: 399px) {
#seg, #ter { display: none }
.small-only { display: block }
}
Though I am curious why you need to remove the elements.
Hi Ryan.
Forget about the expression. I meant that I need to remove elements from the page and insert others in screens lower than 399px.
What I do not want is having duplicate elements (for instance menus or menu items) in the page. So I want to remove some and insert others in this case.
Do you think that I am exaggerating the problem? Do you think that I should forget about javascript and turn to pure css (display: none and block in each case)?
You are on the right track to not duplicate elements, but you should not need to swap them for others.
You can use the same menu (html) for both desktop and mobile, then use css (within the media query) to restyle the menu for mobile.
There are three menus with different items. Some of them must swap from one to another.
It is not as simple as restyle.
The script works fine but in IPhone5 and there must be a reason.
It seems to work ok for me on my old iphone4 so I assume an iphone5 would work also and indeed the mac simulator which is 99.9% accurate shows it working in the iphone5 also.
Do you have a live demo where you see it not working?
No, there is no live demo. I am working local, and use Browserstack to test some code.
Perhaps something wrong with Browserstack?
Browserstack will be less accurate than a real iphone or indeed the mac simulator which was built for the job.
The code in my codepen is working fine for me so unless you can provide a similar stand alone test that shows the problem then I would suggest that it is browserstack that is at fault.
As others have said hiding with jquery rather than hiding with css media queries seems redundant in some respects as users will still have to download the complete html to start with and then wait while jquery works out what to hide. The css version will be instant.
Usually matchmedia is used to apply js methods to elements (such as event listeners or similar) when the media is matched. Otherwise just use css media queries for display issues.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.