I have a solution to conceal CSS from all browsers except for iPhones. You can find the details here: How do I apply a stylesheet just to the iPhone (and not IE), without browser sniffing?
Now, my question is: How can I hide CSS specifically from iPhones without affecting other browsers?
One solution is to utilize @media queries:
<link rel="stylesheet" href="noniPhoneStylesheet1.css" media="only screen and (min-device-width:490px)" />
This method will automatically prevent iPhone browsers from accessing the specified stylesheet, as the iPhone's screen width is 480px. By placing any styles intended to be hidden from iPhones in this stylesheet, you can achieve the desired effect. However, keep in mind that this approach will also block the stylesheet from being downloaded by other devices that support media queries and have a screen width below 490px.
If you want to apply specific CSS styles for iPhones, you can use a conditional check in your code. If the user agent indicates it's an iPhone device, then append the iPhone-specific CSS; otherwise, append your normal CSS.
var agent = navigator.userAgent.toLowerCase();
var isIPhone = (agent.indexOf('iphone') != -1);
if (isIPhone)
document.createElement("style")... //iPhone CSS
else
document.createElement("style")... //normal CSS
Alternatively, you could implement a straightforward redirection to a page that doesn't include CSS, or employ PHP to identify iPhone users and provide them with a style-free page — following a logic similar to:
if user is using an iPhone {
echo //display page without CSS
else {
echo //display page with CSS
}
After exploring various options, I eventually decided to implement a rather unconventional solution that utilizes media queries and the getComputedStyle method to automatically redirect users to a mobile site if they are browsing from an iPhone-like device.
<style media="only screen and (max-device-width: 480px)">html{border-top-style:dashed;}</style>
<script>
if(window.location.search.indexOf("?m=t")==-1 && window.getComputedStyle) {
var mobile = false;
if(window.getComputedStyle(document.getElementsByTagName("html")[0],null).getPropertyValue("border-top-style")=="dashed") {
var mobile = true;
}
if(mobile) {
window.location.replace(window.location+"?m=t");
}
}
</script>
I remember coming across the concept of using getComputedStyle on Stack Overflow, although the exact source eludes me at the moment.
I've been struggling to figure out the correct format for creating a border-less table that, when pasted in Word, will maintain its appearance as shown below: <strong>Foo</strong> <ol> <li value="0">This is zero.</li&g ...
Is there a way to make the fixed navbar shrink 50% when it starts scrolling? I've only come across text navbars, but I'm looking for one with a logo. Any suggestions would be greatly helpful. You can access the css and html from that link. ...
Why is it impossible to assign a z-index to a floated image and what are the reasons behind this limitation? ...
I'm looking to add an automatic image effect when the page is loaded. I currently have this code in my js file: $(window).ready(function(){ $(pin).click(function(){ $("#pin01").show().animate({left: '650px'}); }) }); Here is the HTML wit ...
When using materializecss to create a slider, I encountered an issue where the image is full width but not full height, causing scrollbars to appear. What changes can I make to ensure the slider fills out my screen without any scrollbars? Additionally, I ...
Recently, I've been working on a gallery of photos that showcases different individuals. My goal is to have information about each person displayed when their respective photo is hovered over - including their name and role. .gallery { position: ...
My website is linked with WordPress, but I'm encountering a 403 forbidden error in the sub-menu. Can someone assist me with this issue? I have uploaded a screenshot of the folder in iPage here Additionally, I want my WordPress page to show up correc ...
Is there a way to initially hide the datatable sorting icon upon loading, but have it display automatically when clicking on the header? I've been searching for a solution without success. https://i.sstatic.net/o2Yqa.png ...
I am facing an issue with filling an SVG path with a background image. I have tried various methods found on Google, but none seem to work as expected. Here is the code snippet I have been working with: <div className="intro"> ...
In the past year, I have had no issues working with Google Analytics, but now I am transitioning to Swift. However, I am encountering difficulties importing it using pods. After thorough research, it appears that the issue lies with the requirement of [use ...
Creating a customized WordPress options panel is an essential task. One of the key functionalities it offers is allowing users to select their preferred colors. To achieve this, I currently follow a method where I utilize a default stylesheet and then appl ...
Currently, I am working on a webpage that will trigger an ajax call upon loading. The response data in JSON format will be processed and the elements will then be added to the DOM as shown below: $.ajax({ type: 'POST', url: "http://mysite.de ...
Within a container, I have two divs - the first one with absolute positioning. Strangely, in IE7, the second div doesn't seem to acknowledge the top margin. Padding works fine, but for visual consistency, I prefer using margin. The culprit appears to ...
I am trying to make each "card" of a WordPress plugin clickable on my website. I have inserted a Pure JS element with the following code: document.getElementsByClassName('fc_card-container').onclick = function() {alert('It works!');} ...
Would it be feasible to showcase a static HTML page while the dyno is starting up, just like how a custom page can be shown during errors or maintenance mode? The size of my app's slug is quite significant, leading to a startup time of almost 50 seco ...
Is there a way to print the contents of a DIV on a webpage? Currently, I am using JavaScript to retrieve the contents of the div and then passing it to a new window object where I call the .print() function. The text contents and images are displayed corre ...
I've encountered an issue with my code - it works fine, but I can't figure out where the setter for my view's datasource delegate is being called from. I understand the code and why it works, but I'm curious about who initiates the call ...
I am looking to create a unique effect where upon hovering over an image, color will be applied in a radial shape on a grayscaled image within a div that is pointed by the cursorhttps://i.sstatic.net/64RJv.jpg Below you can see the desired outcome compare ...
Have you seen the awesome animation on Discord's website? Check it out here! The way those coins move up and down so smoothly is really impressive. How can I recreate that effect for my own images? I decided to start with this code snippet img { ...
I am facing an issue where a scroll is being created and it appears offset on different screen sizes: https://i.sstatic.net/KYTCN.jpg I need help to resolve this problem and make it responsive. Even after trying to add overflow: hidden; it still doesn&a ...