This is a two part question. I have a website where there is a simple link with information for a user to view and at the moment I only have an iOS app version of my product. What I would like to do is if the user were to view the link on an iOS device I would like to restrict some of the information visible to the user, encouraging them to download the iOS app to see the info but if they are on an android device I would like to display all necessary content to the user since we do not yet have an Android app available. My two questions are:
1) Is it possible to detect if a user is on an iOS device to limit how much they can view on the web page?
2) Is it bad practice to show different content to users based on their device?
By the way, security is not an issue here. To be more specific I have an events app and I want to hide the address field on the web page for iOS devices so they will more likely download the app to view it but I do not want to completely exclude Android users. Is this even worth my time? Should I just forget about Android users all together for now?
It's not bad practice, everyone is displaying different content since you can't fit everything on phone devices. For example large tables.
You don't need javascript for this, you can do this with css only. Take a look at this example and try to implement it to your code.
HTML:
Link
Link
CSS
.desktop {
display: block;
}
.phone {
display: none;
}
#media screen and (max-width: 768px) {
.desktop {
display: none;
}
.phone {
display: block;
}
}
I'm using the so called media-queries which you can find more information about here
What this does is that the browser, both on initial render, resize, and rotate will display the rules within the media queries when the device windows width <= 768px. Those rules will override the previous.
Related
I have a web application that designed by ionic 2 to be used on browser
my web app works fine on mobile screen, but Is possible to make it such as this below picture ?
If possible, how can I do it ?
Yes you can do this by using css media query.
#media only screen and (min-width: 500px) {
body {
width: 500px;
}
}
hope it will work for you.
Or another perfect solution is for you.
Run this command
ionic serve --lab
After running command, on the right side of the browser, there is a buttuon "Platform", click on it and select your desired platform Android, iOS or Window or all of them.
Is there a way to detect if the site is being viewed in mobile mode? That means the mobile version of the view itself. This should change after the user has called Request desktop version from the menu of his browser for example. That's the property I want to handle.
my website is just not layed out well yet for mobile and for now, I'd like to just tell that to the user. Something like 'Yeah, I know my site looks ugly on your phone, but you can do your job better, if you switch to desktop view
The usual way to do this is to use media queries to check the screen size; if it's below a certain value, make the "this layout sucks" button visible.
.switchToDesktopButton {display:none}
#media screen and (max-width: 480px) {
/* we're on mobile */
.switchToDesktopButton {display:block}
}
I need to make a link open the native social media app if installed or redirect to the URL if not installed or if user is on a desktop.
I am using this bit of code in my link.
It works great except with desktops. The URL actually loads just fine, but, there is an error pop up stating that it can't open up the 'fb://'. Which makes sense, but like I said, this error pop up is not preventing the URL from loading, my facebook page shows up, just has the pop up window over the top and once I click 'do nothing' it goes away and all is good.
How can I make that error window not pop up on desktops?
I have tried a lot of different javascript functions to try and make the app open in mobile and URL in desktop. Many of them came from here. But none of them have worked for me. My code is the only thing that has come close to doing what I want.
I am looking for a proven code to accomplish this task or modification of my code above.
Make two links (mobile and desktop) then use a media query to hide one or the other depending on screen size. see example https://jsfiddle.net/kh0prtc4/9/
html
<a class="mobile" href="fb://MY FB PAGE" onclick="setTimeout(function(){ window.location='https://www.MY FB PAGE' }, 100)">mobile</a>
<a class="desktop" href="MY FB PAGE" onclick="setTimeout(function(){ window.location='https://www.MY FB PAGE' }, 100)">desktop</a>
css
.mobile {
display: none;
}
#media (max-width: 600px) {
.desktop {
display: none;
}
.mobile {
display: inline;
}
}
I am trying to hide an adsense ad unit on smaller screen sizes for responsive design purposes.
I am aware of https://support.google.com/adsense/answer/3543893?hl=en&ref_topic=1307438
which indicates you are allowed to use css media queries to hide a unit as follows:
#media (max-width: 400px) { .adslot_1 { display: none; } }
I have tried that but keep on getting the following error for the screen sizes that I don't display the ads on:
"Cannot find a responsive size for a container of width=0px and data-ad-format=auto"
I find the following JavaScript solution much simpler and would prefer to use it instead of the media queries. I just add a test and do not call the adsense code unless the screen size is a sufficient size. It solves the error I was getting and I imagine it will save a request to the adsense servers as well(full disclosure: I do not understand the adsense code at all).
if ( $( window ).width() >= 600 ) {
(adsbygoogle = window.adsbygoogle || []).push({});
}
Would an implementation like the above violate any of the programs policies/guidelines? Is it a reasonable and appropriate way to not display the ad units on certain screen sizes?
http://detectmobilebrowsers.com/
Check this website out, there you can find ready to use scripts to detect if the user is on mobile or desktop, that way you can tell if he is on mobile and hide the Adsense block, or even better, you can call a "Responsive AD ID" from the Google Adsense, which is also recommended for mobile by Adsense itself.
If you still need a more simple way to detect if the user in on mobile, try this out.
html.
<div class="my_responsive_add">
your ad
</div>
and css.
.my_responsive_add {
display:inline;
}
#media (max-width:#maxResponsiveWideWidth){
.my_responsive_add {
display:none;
}
}
I would recommend you to not hide the AD, and use the responsive ad, as it will look good on mobile users, and that way you can get clicks from mobile users.
To answer your question, I believe that by hiding the AD, it will not violate any of the program policies as far as I know, since that specific AD will not get any Clicks at all and it will remain "quiet" and will not drag attention.
Hope this helps a little, good luck.
Take a look here Modification of the AdSense ad code to read about adsense program policies particularly the 'Acceptable modifications'
If anybody still got the same problem with display:none. I fixed it by removing the data-ad-format parameter from element. and keep everything else the same as documented by Google here at 'Hiding an ad unit' section, which means control the format using CSS media queries.
And it makes sense because you cannot set the format as auto when you specify the data-ad-format value and then control it by CSS.
What I would like to build is a button that will allow the user to call in. On desktop this element will look like a big call-to-action,
then on mobile this will be both a call-to-action and an actual method to call.
The challenge that I need to address now is that the ability to call should be only present when on mobile. This is my current code:
<div id="headerCTA">
<div>
<a href="tel:888-336-1301">
<div>
Schedule a pickup<br>
888-336-1301
</div>
</a>
</div>
</div>
[Code gist on GitHub - for additional commenting]
But when on desktop (dictated by screen width?) this link should be deactivated. At the moment if someone happens to click on this from desktop, it attempts to open a page as "tel:888-336-1301"
Which produces the following error:
The address wasn't understood
Firefox doesn't know how to open this address, because the protocol (tel) isn't associated with any program.
Another idea, that doesn't involve JavaScript, is to use CSS pointer-events property. Use media query to target devices that may not have the ability to make calls and for them, set pointer-events property to none. This way, clicking on the link won't have any effect.
Your code could look like this:
#media only screen
and (min-device-width : 768px){
#headerCTA a{
pointer-events: none;
}
}
See pointer-events property documentation for details.
Use a mobile detection script, like the one in the accepted answer here: Detecting a mobile browser
Then
var mobile = mobilecheck();
if (!mobile) {
document.getElementById('telephone-link').href = '#';
}